Erste Schritte mit dem Consumer SDK für JavaScript

Mit dem JavaScript SDK können Sie den Standort von Fahrzeugen und Orten von Interesse, die in Fleet Engine erfasst werden. Bibliothek eine JavaScript-Kartenkomponente enthält, die als Drop-in-Ersatz fungiert für eine Standardentität google.maps.Map und Datenkomponenten, die verbunden werden sollen mit Fleet Engine. Mit dem JavaScript SDK können Sie innerhalb Ihrer Webanwendung eine anpassbare, animierte Fahrt und Bestellabwicklung bereitstellen.

Komponenten

Das JavaScript SDK bietet Komponenten zur Visualisierung. von Fahrzeugen und Wegpunkten sowie Rohdaten-Feeds für die voraussichtliche Ankunftszeit eines Fahrers. oder die verbleibende Strecke.

Kartenansicht für Fahrt- und Bestellfortschritt

Mit der Komponente „Kartenansicht“ werden die Position von Fahrzeugen und Wegpunkten visualisiert. Wenn die Route für ein Fahrzeug bekannt ist, animiert die Komponente „Kartenansicht“ des Fahrzeugs auf der vorhergesagten Wegbewegung.

Anbieter des Reiseziels

Das JavaScript SDK enthält eine Fahrtstelle. Anbieter, der Standortinformationen für beobachtete Objekte in Fahrt- und Bestellfortschritt

Mit dem Anbieter des Reiseziels können Sie Folgendes verfolgen:

  • Der Start- oder Zielort einer Fahrt.
  • Der Standort und die Route des Fahrzeugs, das der Fahrt zugewiesen ist.

Erfasste Standortobjekte

Der Standortanbieter erfasst den Standort von Objekten wie Wegpunkten und Fahrzeugen.

Startort

Der Startort ist der Ort, an dem eine Fahrt beginnt. Sie markiert Abholort.

Zielspeicherort

Der Zielort ist der Ort, an dem eine Fahrt endet. Sie kennzeichnet den Abgabeort.

Standort des Wegpunkts

Ein Wegpunkt ist jeder Ort entlang der Route einer aufgezeichneten Fahrt. Beispielsweise ist jede Haltestelle auf einer Busroute ein Wegpunkt.

Fahrzeugstandort

Der Fahrzeugstandort ist der nachverfolgte Standort eines Fahrzeugs. Sie kann optional eine Route für das Fahrzeug angeben.

Abruf von Authentifizierungstokens

Um den Zugriff auf die in Fleet Engine gespeicherten Standortdaten zu steuern, müssen Sie Einen JSON Web Token (JWT) Minting-Dienst für Fleet Engine implementieren auf Ihrem Server. Implementieren Sie dann einen Abruf von Authentifizierungstokens als Teil Ihrer Webanwendung mit dem JavaScript SDK um den Zugriff auf die Standortdaten zu authentifizieren.

Stiloptionen

Marker und Polylinienstile bestimmen das Erscheinungsbild des erfasste Standortobjekte auf der Karte hinzufügen. Sie können Benutzerdefinierte Stiloptionen, um den Standardstil an den Stil anzupassen Ihrer Webanwendung.

Sichtbarkeit beobachteter Standorte steuern

In diesem Abschnitt werden die Sichtbarkeitsregeln für erfasste Standortobjekte beschrieben. für vordefinierte Standortanbieter von Fleet Engine. Benutzerdefiniert oder abgeleitet Standortanbieter können die Sichtbarkeitsregeln ändern.

Fahrzeuge

Ein Mitfahrfahrzeug ist ab dem Zeitpunkt der Zuweisung einer Fahrt sichtbar bis zum Zeitpunkt des Abbruchs. Wenn die Fahrt gestrichen wird, ist das Fahrzeug länger sichtbar.

Alle anderen Standortmarkierungen

Alle anderen Standortmarkierungen für Start-, Zielort und Wegpunkte sind immer auf der Karte angezeigt. Beispiel: Ein Mitfahrdienst oder ein Lieferort wird immer auf der Karte angezeigt, unabhängig davon, Status der Fahrt oder Lieferung.

Erste Schritte mit dem JavaScript SDK

Stellen Sie vor der Verwendung des JavaScript SDK sicher, vertraut mit Fleet Engine und mit dem Abrufen eines API-Schlüssels.

Wenn Sie eine Fahrt mit einem Mitfahrdienst verfolgen möchten, müssen Sie zuerst einen Reise-ID-Anspruch erstellen.

Reise-ID-Anspruch erstellen

Wenn Sie eine Fahrt über den Anbieter der Fahrtroute verfolgen möchten, gehen Sie so vor: Erstellen Sie ein JSON Web Token (JWT) mit einer Fahrt-ID-Anforderung.

Fügen Sie zum Erstellen der JWT-Nutzlast im Autorisierungsabschnitt eine zusätzliche Anforderung hinzu mit dem Schlüssel tripid und legen als Wert die Fahrt-ID fest.

Das folgende Beispiel zeigt, wie ein Token für die Verfolgung nach Fahrt-ID erstellt wird:

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "consumer@yourgcpproject.iam.gserviceaccount.com",
  "sub": "consumer@yourgcpproject.iam.gserviceaccount.com",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
     "tripid": "tid_12345",
   }
}

Abruf von Authentifizierungstokens erstellen

Sie können einen Abrufer für Authentifizierungstokens erstellen, um ein Miniertes Token abzurufen. mit den entsprechenden Anforderungen auf Ihren Servern über einen Dienst, Kontozertifikat für Ihr Projekt. Es ist wichtig, nur Tokens zu erstellen. auf Ihren Servern und geben Sie Ihre Zertifikate niemals an Clients weiter. Andernfalls gefährden Sie die Sicherheit Ihres Systems.

Der Fetcher muss eine Datenstruktur zurückgeben. mit zwei Feldern, die von einem Promise eingeschlossen sind:

  • Einen String token.
  • Eine Zahl expiresInSeconds. Ein Token läuft in dieser Zeit ab nach abgerufen wird.

Das JavaScript Consumer SDK fordert über das Authentifizierungstoken ein Token an. Fetcher, wenn eine der folgenden Bedingungen zutrifft:

  • Sie verfügt über kein gültiges Token, z. B. wenn der Fetcher bei ein neuer Seitenaufbau oder der Abruf mit keinem Token zurückgegeben wurde.
  • Das zuvor abgerufene Token ist abgelaufen.
  • Das zuvor abgerufene Token läuft innerhalb einer Minute ab.

Andernfalls verwendet das SDK das zuvor ausgestellte, noch gültige Token und verwendet keine ruft den Fetcher auf.

Das folgende Beispiel zeigt, wie ein Authentifizierungstoken-Abruf erstellt wird:

JavaScript

async function authTokenFetcher(options) {
  // options is a record containing two keys called 
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.Token,
    expiresInSeconds: data.ExpiresInSeconds
  };
}

TypeScript

function authTokenFetcher(options: {
  serviceType: google.maps.journeySharing.FleetEngineServiceType,
  context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
  // The developer should generate the correct
  // SERVER_TOKEN_URL based on options.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.jwt,
    expiresInSeconds: data.expirationTimestamp - Date.now(),
  };
}

Behalten Sie bei der Implementierung des serverseitigen Endpunkts zum Erstellen der Tokens den Parameter im Hinterkopf:

  • Der Endpunkt muss eine Ablaufzeit für das Token zurückgeben. im Beispiel oben als data.ExpiresInSeconds angegeben.
  • Beim Abrufen von Authentifizierungstokens muss die Ablaufzeit (in Sekunden, ab dem Zeitpunkt des Abrufs) in die Bibliothek übertragen, wie im Beispiel gezeigt.
  • SERVER_TOKEN_URL hängt von der Implementierung Ihres Anbieters ab. Dies sind die URLs für den Beispielanbieter: <ph type="x-smartling-placeholder">
      </ph>
    • https://SERVER_URL/token/driver/VEHICLEID
    • https://SERVER_URL/token/consumer/TRIPID

Karte aus HTML laden

Das folgende Beispiel zeigt, wie das JavaScript SDK geladen wird. von einer angegebenen URL. Der callback-Parameter führt die initMap aus. nachdem die API geladen wurde. Mit dem Attribut defer kann der Browser Fahren Sie mit dem Rendern des Rests der Seite fort, während die API geladen wird.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>

Eine Reise verfolgen

In diesem Abschnitt erfahren Sie, wie Sie das JavaScript SDK verwenden. einer Fahrt mit einem Mitfahrdienst oder einem Lieferdienst zu folgen. Achten Sie darauf, Bibliothek aus der im Script-Tag angegebenen Callback-Funktion laden bevor Sie den Code ausführen.

Anbieter von Reisezielen instanziieren

Durch das JavaScript SDK wird ein Standortanbieter vordefiniert für die Fleet Engine Ridesharing API. Verwenden Sie Ihre Projekt-ID und einen Verweis auf Ihre Token-Factory, um sie zu instanziieren.

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineTripLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

          // Optionally, you may specify a trip ID to
          // immediately start tracking.
          tripId: 'your-trip-id',
});

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineTripLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify a trip ID to
          // immediately start tracking.
          tripId: 'your-trip-id',
});

Kartenansicht initialisieren

Initialisieren Sie nach dem Laden des JavaScript SDK. Kartenansicht und fügen sie der HTML-Seite hinzu. Ihre Seite sollte Folgendes enthalten: Ein &lt;div&gt;-Element, das die Kartenansicht enthält Das &lt;div&gt;-Element heißt im folgenden Beispiel map_canvas.

Lege die Fahrt-ID für den Standortanbieter fest, um Rennbedingungen zu vermeiden im Callback, der nach der Initialisierung der Karte aufgerufen wird.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerCustomization: vehicleMarkerCustomization,
  activePolylineCustomization: activePolylineCustomization,
  // Any undefined styling options will use defaults.
});

// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.tripId = 'your-trip-id';

// Give the map an initial viewport to allow it to 
// initialize; otherwise, the 'ready' event above may 
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerCustomization: vehicleMarkerCustomization,
  activePolylineCustomization: activePolylineCustomization,
  // Any undefined styling options will use defaults.
});

// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
locationProvider.tripId = 'your-trip-id';

// Give the map an initial viewport to allow it to 
// initialize; otherwise, the 'ready' event above may 
// not fire. The user also has access to the mapView 
// object to customize as they wish.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

Auf Änderungsereignisse warten

Sie können Metainformationen zu einer Fahrt aus dem Aufgabenobjekt abrufen mithilfe des Standortanbieters. Die Metainformationen umfassen die voraussichtliche Ankunftszeit und verbleibende Strecke vor dem Start oder der Abgabe. Änderungen an den Metainformationen Ein update-Ereignis wird ausgelöst. Das folgende Beispiel zeigt, wie auf diese Änderungsereignisse gewartet wird.

JavaScript

locationProvider.addListener('update', e => {
  // e.trip contains data that may be useful
  // to the rest of the UI.  
  console.log(e.trip.dropOffTime);
});

TypeScript

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
  // e.trip contains data that may be useful
  // to the rest of the UI.  
  console.log(e.trip.dropOffTime);
});

Fehler verarbeiten

Fehler, die asynchron durch das Anfordern von Fahrtinformationen auftreten Fehlerereignisse. Das folgende Beispiel zeigt, wie auf diese Ereignisse gewartet wird um Fehler zu beheben.

JavaScript

locationProvider.addListener('error', e => {
  // e.error contains the error that triggered the 
  // event
  console.error(e.error);
});

TypeScript

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error contains the error that triggered the 
  // event
  console.error(e.error);
});

Hinweis:Bibliotheksaufrufe müssen in try...catch-Blöcken umschlossen werden. um unerwartete Fehler zu beheben.

Nicht mehr beobachten

Um zu verhindern, dass der Standortanbieter die Fahrt verfolgt, entfernen Sie die Fahrt-ID aus Standortanbieter

JavaScript

locationProvider.tripId = '';

TypeScript

locationProvider.tripId = '';

Standortanbieter aus der Kartenansicht entfernen

Das folgende Beispiel zeigt, wie Sie einen Standortanbieter aus der Kartenansicht entfernen.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Design der Basiskarte anpassen

Um das Design der Google Maps-Komponente anzupassen, Karten gestalten oder indem Sie Optionen direkt im Code festlegen.

Cloudbasiertes Gestalten von Karteninhalten

Cloudbasiertes Gestalten von Karteninhalten können Sie Kartenstile für alle Ihre Apps erstellen und bearbeiten, in denen Google Maps verwendet wird. über die Google Cloud Console erstellen, ohne dass Änderungen am Code erforderlich sind. Die Kartenstile werden als Karten-IDs in Ihrem Cloud-Projekt gespeichert. Bis und wenden Sie einen Stil auf Ihre JavaScript SDK-Karte an, mapId und alle anderen mapOptions wenn Sie die JourneySharingMapView erstellen. Das Feld „mapId“ kann nicht geändert werden oder hinzugefügt werden, nachdem JourneySharingMapView instanziiert wurde. Die folgenden Beispiels zeigt, wie Sie einen zuvor erstellten Kartenstil mit einem Karten-ID.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // and any other styling options.
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // and any other styling options.
});

Codebasiertes Gestalten von Karteninhalten verwenden

Eine weitere Möglichkeit zum Anpassen des Kartenstils besteht darin, mapOptions, wenn Sie JourneySharingMapView erstellen.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

Benutzerdefinierte Markierungen verwenden

Mit dem JavaScript SDK können Sie das Design von Markierungen anpassen, die auf der Karte. Dazu legen Sie Anpassungen fest, die der Das JavaScript SDK wird dann vor dem Hinzufügen von Markierungen zur Karte und bei jeder Markierung aktualisiert

Die einfachste Anpassung besteht darin, MarkerOptions -Objekt, das auf alle Markierungen desselben Typs angewendet wird. Die Änderungen die im -Objekt angegeben sind, werden angewendet, nachdem die einzelnen Markierungen erstellt wurden. Standardoptionen überschreiben.

Eine erweiterte Option besteht darin, eine Anpassungsfunktion anzugeben. Anpassung -Funktionen ermöglichen die Gestaltung von Markierungen basierend auf Daten sowie das Hinzufügen von Interaktivität von Markierungen, wie z. B. Klickhandhabung. Insbesondere „Reise und Bestellung“ Beim Fortschritt werden Daten über den Typ des Objekts an die Anpassungsfunktion übergeben. Markierung steht für: Fahrzeug, Startpunkt, Wegpunkt oder Ziel. Dadurch können dann Markierungsstil, der basierend auf dem aktuellen Status des Markierungselements geändert werden soll sich selbst; z. B. die Anzahl der verbleibenden Wegpunkte, bis das Fahrzeug fertig ist der Fahrt. Sie können sogar Daten aus Quellen außerhalb von Fleet Engine zusammenführen, die Markierung basierend auf diesen Informationen gestalten.

Das JavaScript SDK bietet die folgenden Anpassungsparameter in FleetEngineTripLocationProviderOptions:

Den Stil von Markierungen mit MarkerOptions ändern

Das folgende Beispiel zeigt, wie Sie den Stil einer Fahrzeugmarkierung mit Ein MarkerOptions-Objekt. Folgen Sie diesem Muster, um den Stil eines beliebigen Markierung mithilfe einer der zuvor aufgeführten Markierungsanpassungen.

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Den Stil von Markierungen mithilfe von Anpassungsfunktionen ändern

Das folgende Beispiel zeigt, wie Sie den Stil einer Fahrzeugmarkierung konfigurieren. Folgen dieses Muster, um den Stil einer beliebigen Markierung mithilfe der Markierung anzupassen. die zuvor aufgeführten Anpassungsparameter.

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
};

Click Handling zu Markierungen

Das folgende Beispiel zeigt, wie Sie einer Fahrzeugmarkierung Click Handling hinzufügen. Folgen Sie diesem Muster, um Click Handling zu allen Markierungen hinzuzufügen, die eine der Markierungen verwenden. die zuvor aufgeführten Anpassungsparameter.

JavaScript

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

TypeScript

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

Polylinienanpassungen verwenden

Mit dem JavaScript SDK können Sie außerdem das Erscheinungsbild der Fahrt auf der Karte anzeigen. Die Bibliothek erstellt ein google.maps.Polyline -Objekt für jedes Koordinatenpaar in den aktiven oder verbleibenden path. Sie können die Polyline-Objekte gestalten, indem Sie Polylinienanpassungen angeben. Die werden diese Anpassungen dann in zwei Situationen angewendet: -Objekten zur Karte hinzugefügt wird und wann sich die für die -Objekte verwendeten Daten geändert haben.

Ähnlich wie bei der Anpassung von Markierungen können Sie eine Reihe von PolylineOptions auf alle übereinstimmenden Polyline-Objekte angewendet, wenn sie erstellt oder aktualisiert wurde.

Ebenso können Sie eine Anpassungsfunktion angeben. Anpassungsfunktionen ermöglichen eine individuelle Gestaltung der Objekte auf der Grundlage von Daten, die von Fleet Engine gesendet werden. Die Funktion kann den Stil jedes Objekts basierend auf dem aktuellen Status von ändern. des Fahrzeugs; Sie können z. B. das Polyline-Objekt in einer tieferen Schattierung einfärben oder wird es dicker, wenn das Fahrzeug langsamer fährt. Sie können sogar gegen aus Quellen außerhalb von Fleet Engine ändern und das Polyline-Objekt entsprechend gestalten. Informationen.

Sie können die Anpassungen mithilfe der Parameter in den FleetEngineTripLocationProviderOptions Sie können Anpassungen für verschiedene Pfadzustände in der die bereits gereist sind, aktiv reisen oder noch nicht gereist sind. Die -Parameter sind wie folgt:

Stil von Polyline-Objekten mit PolylineOptions ändern

Das folgende Beispiel zeigt, wie der Stil für ein Polyline-Objekt konfiguriert wird mit PolylineOptions Folgen Sie diesem Muster, um den Stil eines Polyline-Objekts mithilfe eines beliebigen der zuvor aufgeführten Polylinienanpassungen.

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

Den Stil von Polyline-Objekten mithilfe von Anpassungsfunktionen ändern

Das folgende Beispiel zeigt, wie Sie die Methode zum Konfigurieren eines aktiven Polyline-Objekts Stile. Folgen Sie diesem Muster, um den Stil eines Polyline-Objekts anzupassen mithilfe der zuvor aufgeführten Parameter zur Anpassung der Polylinie.

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      });
    }
  };

TypeScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: TripPolylineCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      });
    }
  };

Sichtbarkeit von Polyline-Objekten steuern

Standardmäßig sind alle Polyline-Objekte sichtbar. So erstellen Sie ein Polyline-Objekt: unsichtbar werden, visible Property:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Traffic-sensitive Polyline-Objekte rendern

Fleet Engine gibt Daten zur Traffic-Geschwindigkeit für die aktiven und verbleibenden Pfade für folgte. Anhand dieser Informationen können Sie den Polyline gestalten. -Objekten entsprechend ihrer Verkehrsgeschwindigkeit:

JavaScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineTripLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineTripLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineTripLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: TripPolylineCustomizationFunctionParams) => {
    FleetEngineTripLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

InfoWindow für eine Fahrzeug- oder Standortmarkierung anzeigen

Sie können ein InfoWindow- um zusätzliche Informationen zu einem Fahrzeug oder einer Standortmarkierung anzuzeigen.

Das folgende Beispiel zeigt, wie Sie eine InfoWindow erstellen und anhängen. zu einer Fahrzeugmarkierung hinzufügen:

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', e => {
  const stopsCount = e.trip.remainingWaypoints.length;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.   
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
  const stopsCount = e.trip.remainingWaypoints.length;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.   
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

Automatische Anpassung deaktivieren

Sie können verhindern, dass der Darstellungsbereich der Karte automatisch an das Fahrzeug angepasst wird und berechnet die Route, indem Sie die automatische Anpassung deaktivieren. Im folgenden Beispiel zeigt, wie die automatische Anpassung deaktiviert wird, wenn Sie Fahrt und Reihenfolge konfigurieren Fortschrittskartenansicht.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

Vorhandene Karte ersetzen

Mit dem JavaScript SDK können Sie eine vorhandene Karte, die Markierungen oder andere Anpassungen enthält ohne die Anpassungen zu verlieren.

Beispiel: Du hast eine Webseite mit einer standardmäßigen google.maps.Map. Entität, für die eine Markierung angezeigt wird:

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, centered at Uluru
  var map = new google.maps.Map(document.getElementById('map'));
  map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <!-- Load the API from the specified URL.
       * The async attribute allows the browser to render the page while the API loads.
       * The key parameter will contain your own API key (which is not needed for this tutorial).
       * The callback parameter executes the initMap() function.
    -->
    <script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

So fügen Sie das JavaScript SDK hinzu:

  1. Fügen Sie Code für die Authentifizierungstoken-Factory hinzu.
  2. Initialisieren Sie einen Standortanbieter in der Funktion initMap().
  3. Initialisieren Sie die Kartenansicht in der initMap()-Funktion. Die Ansicht enthält die Karte.
  4. Verschieben Sie Ihre Anpassungen in die Callback-Funktion für die Initialisierung der Kartenansicht.
  5. Fügen Sie dem API-Ladeprogramm die Standortbibliothek hinzu.

Das folgende Beispiel zeigt die erforderlichen Änderungen:

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
let locationProvider;

// (1) Authentication Token Fetcher
async function authTokenFetcher(options) {
  // options is a record containing two keys called 
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
      if (!response.ok) {
        throw new Error(response.statusText);
      }
      const data = await response.json();
      return {
        token: data.Token,
        expiresInSeconds: data.ExpiresInSeconds
      };
}

// Initialize and add the map
function initMap() {
  // (2) Initialize location provider.
  locationProvider = new google.maps.journeySharing.FleetEngineTripLocationProvider({
    projectId: "YOUR_PROVIDER_ID",
    authTokenFetcher,
  });

  // (3) Initialize map view (which contains the map).
  const mapView = new google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map'),
    locationProviders: [locationProvider],
    // any styling options
  });

  locationProvider.tripId = TRIP_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // The map, centered at Uluru
    var map = mapView.map;
    map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
    // The marker, positioned at Uluru
    var marker = new google.maps.Marker({position: uluru, map: map});
  };

    </script>
    <!-- Load the API from the specified URL
      * The async attribute allows the browser to render the page while the API loads
      * The key parameter will contain your own API key (which is not needed for this tutorial)
      * The callback parameter executes the initMap() function
      *
      * (5) Add the SDK to the API loader.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

Wenn Sie eine Fahrt mit dem ID in der Nähe von Uluru angegeben haben, wird sie jetzt auf der Karte gerendert.