Erste Schritte mit dem Consumer SDK für JavaScript

Mit dem JavaScript SDK können Sie die Standorte von Fahrzeugen und relevanten Standorten in Fleet Engine visualisieren. Die Bibliothek enthält eine JavaScript-Kartenkomponente, die ein Drop-in-Ersatz für eine standardmäßige google.maps.Map-Entität sowie Datenkomponenten für die Verbindung mit Fleet Engine ist. Mit dem JavaScript SDK kannst du über deine Webanwendung eine anpassbare, animierte Darstellung von Fahrten und Bestellungen bereitstellen.

Komponenten

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

Kartenansicht für den Fahrt- und Bestellfortschritt

Die Kartenansichtskomponente visualisiert die Position von Fahrzeugen und Wegpunkten. Wenn die Route für ein Fahrzeug bekannt ist, animiert die Kartenansichtskomponente das Fahrzeug, während es sich entlang des vorhergesagten Pfads bewegt.

Anbieter von Reisezielen

Das JavaScript SDK umfasst einen Fahrtort, der Standortinformationen für beobachtete Objekte in die Fahrt- und Bestellfortschrittskarte eingibt.

Mit dem Anbieter können Sie Folgendes aufzeichnen:

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

Erfasste Standortobjekte

Der Standortanbieter erfasst die Position von Objekten wie Wegpunkten und Fahrzeugen.

Abreiseort

Der Startort ist der Ort, an dem eine Reise beginnt. Damit wird der Abholort gekennzeichnet.

Zielspeicherort

Der Zielort ist der Ort, an dem eine Fahrt endet. Sie kennzeichnet die Abgabestelle.

Position des Wegpunkts

Ein Wegpunkt ist ein Ort auf der Route einer aufgezeichneten Reise. Beispielsweise ist jede Haltestelle einer Busroute ein Wegpunkt.

Fahrzeugstandort

Der Fahrzeugstandort ist der beobachtete Standort eines Fahrzeugs. Sie kann optional auch eine Route für das Fahrzeug enthalten.

Authentifizierungstoken-Abruf

Wenn Sie den Zugriff auf die in Fleet Engine gespeicherten Standortdaten steuern möchten, müssen Sie auf Ihrem Server einen Erstellungsdienst für JSON Web Token (JWT) für Fleet Engine implementieren. Implementieren Sie dann einen Authentifizierungstoken-Abruf als Teil Ihrer Webanwendung. Verwenden Sie dabei das JavaScript SDK, um den Zugriff auf die Standortdaten zu authentifizieren.

Stiloptionen

Mit Markierungs- und Polylinienstilen wird das Design der beobachteten Standortobjekte auf der Karte festgelegt. Mit benutzerdefinierten Stiloptionen können Sie den Standardstil so ändern, dass er dem Stil Ihrer Webanwendung entspricht.

Sichtbarkeit von beobachteten Standorten steuern

In diesem Abschnitt werden die Sichtbarkeitsregeln für beobachtete Standortobjekte auf der Karte für vordefinierte Standortanbieter von Fleet Engine beschrieben. Anbieter von benutzerdefinierten oder abgeleiteten Standorten können die Sichtbarkeitsregeln ändern.

Fahrzeuge

Ein Mitfahrdienst ist ab dem Zeitpunkt, an dem es einer Fahrt zugewiesen ist, bis zu dem Zeitpunkt der Abgabe sichtbar. Wenn die Fahrt ausfällt, ist das Fahrzeug mehr sichtbar.

Alle anderen Standortmarkierungen

Alle anderen Standortmarkierungen für Start- und Zielort und Wegpunkte werden immer auf der Karte angezeigt. Beispielsweise wird ein Abgabe- oder Lieferort für Mitfahrdienste immer auf der Karte angezeigt, unabhängig vom Zustand der Fahrt oder Lieferung.

Erste Schritte mit dem JavaScript SDK

Bevor Sie das JavaScript SDK verwenden, müssen Sie mit Fleet Engine vertraut sein und wissen, wie Sie einen API-Schlüssel anfordern.

Wenn du eine Fahrt mit einem Mitfahrdienst verfolgen möchtest, erstelle zuerst einen Trip-ID-Anspruch.

Reise-ID-Anspruch erstellen

Wenn Sie eine Fahrt mit dem Fahrtstandortanbieter verfolgen möchten, erstellen Sie ein JSON-Webtoken (JWT) mit einer Fahrt-ID-Anforderung.

Fügen Sie zum Erstellen der JWT-Nutzlast eine zusätzliche Anforderung im Autorisierungsbereich mit dem Schlüssel tripid hinzu und legen Sie 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",
   }
}

Authentifizierungstoken-Abruf erstellen

Sie können einen Authentifizierungstoken-Abruf erstellen, um ein mit den entsprechenden Anforderungen erstelltes Token auf Ihren Servern mithilfe eines Dienstkontozertifikats für Ihr Projekt abzurufen. Es ist wichtig, nur Tokens auf Ihren Servern zu erstellen und Ihre Zertifikate niemals auf Clients freizugeben. Andernfalls gefährden Sie die Sicherheit Ihres Systems.

Der Fetcher muss eine Datenstruktur mit zwei Feldern zurückgeben, die in ein Promise eingeschlossen sind:

  • Einen String token.
  • Eine Zahl expiresInSeconds. In dieser Zeit läuft ein Token nach dem Abruf ab.

Das JavaScript Consumer SDK fordert über den Authentifizierungstoken-Abruf ein Token an, wenn eine der folgenden Bedingungen zutrifft:

  • Sie hat kein gültiges Token, z. B. wenn der Fetcher bei einem neuen Seitenaufbau nicht aufgerufen wurde oder wenn der Fetcher kein Token zurückgegeben hat.
  • 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 ruft den Fetcher nicht 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(),
  };
}

Bei der Implementierung des serverseitigen Endpunkts für die Münzprägung von Tokens ist Folgendes zu beachten:

  • Der Endpunkt muss eine Ablaufzeit für das Token zurückgeben. Im obigen Beispiel wird sie als data.ExpiresInSeconds angegeben.
  • Der Authentifizierungstoken-Abruf muss die Ablaufzeit (in Sekunden vom Zeitpunkt des Abrufs) an die Bibliothek übergeben, wie im Beispiel gezeigt.
  • Die SERVER_TOKEN_URL hängt von der Implementierung Ihres Anbieters ab. Dies sind die URLs für den Beispielanbieter:
    • https://SERVER_URL/token/driver/VEHICLEID
    • https://SERVER_URL/token/consumer/TRIPID

Karte aus HTML laden

Das folgende Beispiel zeigt, wie das JavaScript SDK über eine angegebene URL geladen wird. Der callback-Parameter führt die initMap-Funktion aus, nachdem die API geladen wurde. Mit dem Attribut defer kann der Browser den Rest Ihrer Seite weiterhin rendern, 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>

Einer Reise folgen

In diesem Abschnitt wird beschrieben, wie du mit dem JavaScript SDK eine Mitfahrgelegenheits- oder Lieferfahrt verfolgen kannst. Laden Sie die Bibliothek über die im Skript-Tag angegebene Callback-Funktion, bevor Sie den Code ausführen.

Anbieter von Reisezielen instanziieren

Im JavaScript SDK ist ein Standortanbieter für die Fleet Engine Ridesharing API vordefiniert. 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 die Kartenansicht und fügen Sie sie der HTML-Seite hinzu. Die Seite muss ein <div>-Element enthalten, das die Kartenansicht enthält. Im Beispiel unten heißt das <div>-Element map_canvas.

Um Race-Bedingungen zu vermeiden, lege die Fahrt-ID für den Standortanbieter im Callback fest, 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);

Änderungsereignisse beobachten

Metainformationen zu einer Fahrt können Sie mit dem Standortanbieter aus dem Aufgabenobjekt abrufen. Dazu gehören die voraussichtliche Ankunftszeit und die verbleibende Entfernung vor dem Ein- oder Ausstieg. Änderungen an den Metainformationen lösen ein update-Ereignis aus. Das folgende Beispiel zeigt, wie Sie auf diese Änderungsereignisse warten.

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 beim Anfordern von Fahrtinformationen auftreten, lösen Fehlerereignisse aus. 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 zusammengefasst werden, um unerwartete Fehler zu vermeiden.

Nicht mehr beobachten

Soll der Standortanbieter die Fahrt nicht mehr erfassen, entfernen Sie die Fahrt-ID.

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

Sie können das Erscheinungsbild der Kartenkomponente anpassen, indem Sie mit cloudbasierten Tools die Karte gestalten oder Optionen direkt im Code festlegen.

Cloudbasiertes Gestalten von Karteninhalten

Mit dem cloudbasierten Kartenstil können Sie über die Google Cloud Console Kartenstile für alle Apps erstellen und bearbeiten, in denen Google Maps verwendet wird, ohne dass Änderungen am Code erforderlich sind. Die Kartenstile werden als Karten-IDs im Cloud-Projekt gespeichert. Wenn Sie einen Stil auf Ihre JavaScript SDK-Karte anwenden möchten, geben Sie beim Erstellen des JourneySharingMapView-Objekts einen mapId und einen beliebigen anderen mapOptions an. Das Feld mapId kann nicht mehr geändert oder hinzugefügt werden, nachdem JourneySharingMapView instanziiert wurde. Im folgenden Beispiel sehen Sie, wie Sie einen zuvor erstellten Kartenstil mit einer Karten-ID aktivieren.

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.
});

Codebasierte Kartenstile verwenden

Eine weitere Möglichkeit, den Kartenstil anzupassen, besteht darin, mapOptions beim Erstellen des JourneySharingMapView festzulegen.

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" }
        ]
      }
    ]
  }
});

Anpassungen von Markierungen verwenden

Mit dem JavaScript SDK können Sie das Design von Markierungen anpassen, die der Karte hinzugefügt werden. Dazu legen Sie Anpassungen für Markierungen fest, die vom JavaScript SDK angewendet werden, bevor der Karte Markierungen hinzugefügt werden und bei jeder Markierungsaktualisierung.

Die einfachste Anpassung besteht darin, ein MarkerOptions-Objekt anzugeben, das auf alle Markierungen desselben Typs angewendet wird. Die im Objekt angegebenen Änderungen werden angewendet, nachdem die jeweilige Markierung erstellt wurde. Dabei werden alle Standardoptionen überschrieben.

Eine erweiterte Option besteht darin, eine Anpassungsfunktion anzugeben. Mit Anpassungsfunktionen können Sie Markierungen auf Grundlage von Daten gestalten und Interaktionen hinzufügen, z. B. die Verarbeitung von Klicks. Mit „Trip and Order Progress“ (Fahrt- und Bestellfortschritt) werden Daten über den Objekttyp, den die Markierung darstellt, an die Anpassungsfunktion übergeben: Fahrzeug, Startpunkt, Wegpunkt oder Ziel. Der Stil der Markierungen kann sich dann basierend auf dem aktuellen Status des Markierungselements ändern, z. B. der Anzahl der Wegpunkte, die verbleiben, bis das Fahrzeug die Fahrt beendet. Sie können sogar eine Verknüpfung mit Daten aus Quellen außerhalb von Fleet Engine herstellen und die Markierung basierend auf diesen Informationen gestalten.

Das JavaScript SDK bietet die folgenden Anpassungsparameter in FleetEngineTripLocationProviderOptions:

Stil von Markierungen mit MarkerOptions ändern

Das folgende Beispiel zeigt, wie Sie den Stil einer Fahrzeugmarkierung mit einem MarkerOptions-Objekt konfigurieren. Folgen Sie diesem Muster, um den Stil jeder Markierung mithilfe der zuvor aufgeführten Anpassungen anzupassen.

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Stil von Markierungen mithilfe von Anpassungsfunktionen ändern

Das folgende Beispiel zeigt, wie Sie den Stil einer Fahrzeugmarkierung konfigurieren. Folgen Sie diesem Muster, um den Stil einer Markierung mithilfe der zuvor aufgeführten Parameter zur Anpassung der Markierung anzupassen.

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}`);
};

Markierungen für Klick-Handhabung hinzufügen

Im folgenden Beispiel sehen Sie, wie einer Fahrzeugmarkierung die Klickbehandlung hinzugefügt wird. Folgen Sie diesem Muster, um jeder Markierung mithilfe eines der oben aufgeführten Parameter zur Anpassung von Markierungen eine Klickbehandlung hinzuzufügen.

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 auch das Design der Route auf der Karte anpassen. Die Bibliothek erstellt für jedes Koordinatenpaar im aktiven oder verbleibenden Pfad des Fahrzeugs ein google.maps.Polyline-Objekt. Sie können die Polyline-Objekte gestalten, indem Sie Polylinienanpassungen angeben. Die Bibliothek wendet diese Anpassungen dann in zwei Situationen an: vor dem Hinzufügen der Objekte zur Karte und wenn sich die für die Objekte verwendeten Daten geändert haben.

Ähnlich wie bei der Anpassung von Markierungen können Sie einen Satz von PolylineOptions angeben, der auf alle übereinstimmenden Polyline-Objekte angewendet wird, wenn diese erstellt oder aktualisiert werden.

Ebenso können Sie eine Anpassungsfunktion angeben. Anpassungsfunktionen ermöglichen eine individuelle Gestaltung der Objekte basierend auf den von Fleet Engine gesendeten Daten. Die Funktion kann den Stil der einzelnen Objekte basierend auf dem aktuellen Zustand des Fahrzeugs ändern. So kann das Polyline-Objekt einen tieferen Farbton eingefärbt oder es dicker gemacht werden, wenn das Fahrzeug langsamer ist. Sie können sogar eine Zusammenführung mit Quellen außerhalb von Fleet Engine durchführen und das Polyline-Objekt anhand dieser Informationen gestalten.

Sie können die Anpassungen mithilfe von Parametern in FleetEngineTripLocationProviderOptions angeben. Sie können Anpassungen für verschiedene Pfadzustände der Fahrt des Fahrzeugs vornehmen – also bereits zurückgelegt, aktiv oder noch nicht zurückgelegt. Die Parameter sind:

Stil von Polyline-Objekten mit PolylineOptions ändern

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

JavaScript

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

TypeScript

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

Stil von Polyline-Objekten mithilfe von Anpassungsfunktionen ändern

Das folgende Beispiel zeigt, wie Sie die Gestaltung eines aktiven Polyline-Objekts konfigurieren. Folgen Sie diesem Muster, um den Stil eines Polyline-Objekts mithilfe der zuvor aufgeführten Parameter zur Anpassung von Polylinien anzupassen.

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. Wenn Sie ein Polyline-Objekt unsichtbar machen möchten, legen Sie dessen Attribut visible fest:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Verkehrsabhängige Polyline-Objekte rendern

Fleet Engine gibt Daten zur Verkehrsgeschwindigkeit für die aktiven und verbleibenden Pfade des Fahrzeugs zurück. Anhand dieser Informationen können Sie die Polyline-Objekte entsprechend ihrer Traffic-Geschwindigkeit formatieren:

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 ein Fahrzeug oder eine Standortmarkierung anzeigen

Mit InfoWindow können Sie zusätzliche Informationen zu einem Fahrzeug oder einer Standortmarkierung anzeigen lassen.

Das folgende Beispiel zeigt, wie ein InfoWindow erstellt und an eine Fahrzeugmarkierung angehängt wird:

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 und die erwartete Route angepasst wird, indem Sie die automatische Anpassung deaktivieren. Das folgende Beispiel zeigt, wie Sie die automatische Anpassung deaktivieren, wenn Sie die Kartenansicht für Fahrt und Reihenfolge konfigurieren.

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 ersetzen, die Markierungen oder andere Anpassungen enthält, ohne dass diese Anpassungen verloren gehen.

Angenommen, Sie haben eine Webseite mit einer Standardentität google.maps.Map, auf der 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 Funktion initMap(). Die Ansicht enthält die Karte.
  4. Verschieben Sie Ihre Anpassung in die Callback-Funktion zur 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 der angegebenen ID in der Nähe von Uluru betreiben, wird sie jetzt auf der Karte gerendert.