Flotte mit der JavaScript-Flotten-Tracking-Bibliothek verfolgen

Mit der JavaScript-Flottenverfolgungsbibliothek können Sie die Standorte von Fahrzeugen in ihren Flotten nahezu in Echtzeit visualisieren. Die Bibliothek nutzt die Deliveries API, um die Visualisierung von Lieferfahrzeugen und Aufgaben zu ermöglichen. Wie die JavaScript-Bibliothek zur Sendungsverfolgung enthält sie eine JavaScript-Kartenkomponente, die ein Drop-in-Ersatz für eine standardmäßige google.maps.Map-Entität und -Datenkomponenten ist, die mit Fleet Engine verbunden werden sollen.

Komponenten

Die JavaScript-Flottenverfolgungsbibliothek bietet Komponenten zur Visualisierung von Lieferfahrzeugen und -haltestellen sowie Rohdatenfeeds für die voraussichtliche Ankunftszeit oder die verbleibende Entfernung zu einer Lieferung.

Kartenansicht für Flottenverfolgung

Mit der Komponente „Flotten-Tracking-Kartenansicht“ wird der Standort von Fahrzeugen und Aufgaben visualisiert. Wenn die Route für ein Fahrzeug bekannt ist, animiert die Kartenansichtskomponente das Fahrzeug, während es sich entlang des vorhergesagten Pfades bewegt.

Standortanbieter

Standortanbieter verwenden in Fleet Engine gespeicherte Informationen, um Standortinformationen für verfolgte Objekte an die Journey-Karte zu senden.

Anbieter von Lieferstandorten

Der Anbieter des Lieferorts zeigt die Standortinformationen eines einzelnen Lieferfahrzeugs an. Es enthält Informationen zum Standort des Fahrzeugs sowie zu den Aufgaben, die vom Lieferfahrzeug erledigt wurden.

Standortanbieter für Lieferflotten

Der Standortanbieter der Lieferflotte zeigt die Standortinformationen mehrerer Fahrzeuge an. Sie können nach bestimmten Fahrzeugen oder Standorten filtern oder den gesamten Fuhrpark aufrufen.

Sichtbarkeit von beobachteten Orten steuern

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

Lieferfahrzeuge

Ein Lieferfahrzeug ist sichtbar, sobald es in Fleet Engine erstellt wurde, und unabhängig von seinen Aufgaben auf der gesamten Route sichtbar.

Standortmarkierungen für Aufgaben

Geplante Haltestellen werden auf der Karte als Haltestellenmarkierungen angezeigt. Markierungen für abgeschlossene Aufgaben werden in einem anderen Stil als die geplanten Haltestellen eines Fahrzeugs angezeigt.

Der Ort der Aufgabenergebnisse wird mit Markierungen für Aufgabenergebnisse angezeigt. Aufgaben mit dem Ergebnis „ERFOLGREICH“ werden mit den Markierungen für erfolgreiche Aufgaben angezeigt, während alle anderen Aufgaben mit Markierungen für nicht erfolgreiche Aufgaben angezeigt werden.

Erste Schritte mit der Tracking-Bibliothek für die JavaScript-Flotte

Bevor Sie die JavaScript-Flotten-Tracking-Bibliothek verwenden, sollten Sie mit Fleet Engine vertraut sein und einen API-Schlüssel anfordern. Erstellen Sie dann eine Aufgaben-ID und einen Anspruch auf die Lieferfahrzeug-ID.

Aufgaben-ID und Anspruch auf Lieferfahrzeug-ID erstellen

Wenn du Lieferfahrzeuge mithilfe des Anbieters für Lieferfahrzeuge verfolgen möchtest, musst du ein JSON-Webtoken (JWT) mit einer Aufgaben-ID und einer Anforderung der Lieferfahrzeug-ID erstellen.

Fügen Sie zum Erstellen der JWT-Nutzlast eine zusätzliche Anforderung im Autorisierungsbereich mit den Schlüsseln taskid und deliveryvehicleid hinzu und legen Sie den Wert jedes Schlüssels auf * fest. Das Token sollte mit der Cloud IAM-Rolle Fleet Engine Service Super User erstellt werden. Beachten Sie, dass dies umfassenden Zugriff zum Erstellen, Lesen und Ändern von Fleet Engine-Entitäten gewährt und nur für vertrauenswürdige Nutzer freigegeben werden sollte.

Das folgende Beispiel zeigt, wie Sie ein Token für die Nachverfolgung nach Fahrzeug und Aufgabe erstellen:

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

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.

Die JavaScript-Flottenverfolgungsbibliothek 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 die Bibliothek das zuvor ausgestellte, noch gültige Token und ruft den Fetcher nicht auf.

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

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

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.token,
    expiresInSeconds: data.expiration_timestamp_ms - 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 Ihrer Back-End-Implementierung ab. Dies sind die URLs für das Beispiel-App-Back-End:
  • https://SERVER_URL/token/delivery_driver/DELIVERY_VEHICLE_ID
  • https://SERVER_URL/token/delivery_consumer/TRACKING_ID
  • https://SERVER_URL/token/fleet_reader

Karte aus HTML laden

Das folgende Beispiel zeigt, wie die JavaScript-Bibliothek zum Teilen von Onlinerecherchen ü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>

Einem Lieferfahrzeug folgen

In diesem Abschnitt wird gezeigt, wie Sie die JavaScript-Flottenverfolgungsbibliothek verwenden, um einem Lieferfahrzeug zu folgen. Laden Sie die Bibliothek über die im Skript-Tag angegebene Callback-Funktion, bevor Sie den Code ausführen.

Anbieter für Lieferfahrzeuge instanziieren

In der JavaScript Fleet Tracking Library ist ein Standortanbieter für die Fleet Engine Deliveries API vordefiniert. Verwenden Sie Ihre Projekt-ID und einen Verweis auf Ihre Token-Factory, um sie zu instanziieren.

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

          // Optionally, you may specify 
          // deliveryVehicleId to immediately start
          // tracking.
          deliveryVehicleId: 'your-delivery-id',
});

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

          // Optionally, you may specify
          // deliveryVehicleId to immediately start
          // tracking.
          deliveryVehicleId: 'your-delivery-id',
});

Kartenansicht initialisieren

Initialisieren Sie nach dem Laden der JavaScript Journey Sharing-Bibliothek 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.

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

// If you did not specify a delivery vehicle ID in the 
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId 
                        = 'your-delivery-vehicle-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('Times Square, New York, NY');
mapView.map.setZoom(14);

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

// If you did not specify a delivery vehicle ID in the 
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId 
                        = 'your-delivery-vehicle-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('Times Square, New York, NY');
mapView.map.setZoom(14);

Änderungsereignisse beobachten

Metainformationen zu einer Aufgabe können Sie mithilfe des Standortanbieters aus dem Objekt deliveryVehicle abrufen. Die Meta-Informationen umfassen die voraussichtliche Ankunftszeit und die verbleibende Entfernung vor der nächsten Abholung oder dem nächsten Ausstieg des Fahrzeugs. Änderungen an den Metainformationen lösen ein update-Ereignis aus. Das folgende Beispiel zeigt, wie Sie auf diese Änderungsereignisse warten.

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

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

Auf Fehler warten

Fehler, die asynchron beim Anfordern von Lieferfahrzeuginformationen auftreten, lösen Fehlerereignisse aus. Das folgende Beispiel zeigt, wie auf diese Ereignisse gewartet wird, um Fehler zu beheben.

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

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

Nicht mehr beobachten

Wenn der Standortanbieter das Lieferfahrzeug nicht mehr beobachten soll, entferne die entsprechende Fahrzeug-ID.

locationProvider.deliveryVehicleId = '';

locationProvider.deliveryVehicleId = '';

Standortanbieter aus der Kartenansicht entfernen

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

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

Lieferflotte ansehen

In diesem Abschnitt wird beschrieben, wie Sie die JavaScript Journey Sharing-Bibliothek verwenden, um eine Bereitstellungsflotte aufzurufen. Laden Sie die Bibliothek über die im Skript-Tag angegebene Callback-Funktion, bevor Sie den Code ausführen.

Standortanbieter für Lieferflotten instanziieren

In der JavaScript Fleet Tracking Library ist ein Standortanbieter vordefiniert, der mehrere Fahrzeuge über die FleetEngine Deliveries API abruft. Verwenden Sie Ihre Projekt-ID sowie einen Verweis auf Ihren Token-Abruf, um ihn zu instanziieren.

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

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

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

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleFilter gibt eine Abfrage zum Filtern von Fahrzeugen auf der Karte an. Dieser Filter wird direkt an Fleet Engine übergeben. Unterstützte Formate findest du unter ListDeliveryVehiclesRequest.filter.

locationRestriction schränkt den Bereich ein, in dem Fahrzeuge auf der Karte angezeigt werden. Außerdem wird festgelegt, ob die Standortermittlung aktiviert ist oder nicht. Die Standortverfolgung beginnt erst, wenn diese Einstellung aktiviert ist.

Nachdem der Standortanbieter erstellt wurde, initialisieren Sie die Kartenansicht.

Standortbeschränkung mithilfe des Darstellungsbereichs der Karte festlegen

Die Grenzen von locationRestriction können so konfiguriert werden, dass sie dem aktuell in der Kartenansicht sichtbaren Bereich entsprechen.

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

Änderungsereignisse beobachten

Metainformationen zur Flotte können Sie mithilfe des Standortanbieters aus dem Objekt deliveryVehicles abrufen. Die Metainformationen umfassen Fahrzeugeigenschaften wie den Navigationsstatus, die verbleibende Entfernung und benutzerdefinierte Attribute. Weitere Informationen finden Sie in der Referenzdokumentation. Eine Änderung an den Metainformationen löst ein update-Ereignis aus. Das folgende Beispiel zeigt, wie Sie auf diese Änderungsereignisse warten.

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

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineDeliveryFleetLocationProviderUpdateEvent) => {
  // e.deliveryVehicles contains data that may be
  // useful to the rest of the UI.
  if (e.deliveryVehicles) {
    for (vehicle of e.deliveryVehicles) {
      console.log(vehicle.remainingDistanceMeters);
    }
  }
});

Auf Fehler warten

Fehler, die asynchron beim Anfordern von Informationen zur Lieferflotte auftreten, lösen Fehlerereignisse aus. Beispiele dafür, wie auf diese Ereignisse gewartet wird, finden Sie unter Auf Fehler warten.

Nicht mehr beobachten

Wenn Sie verhindern möchten, dass der Standortanbieter die Lieferflotte verfolgt, setzen Sie die Grenzen des Standortanbieters auf null.

locationProvider.locationRestriction = null;

locationProvider.locationRestriction = null;

Standortanbieter aus der Kartenansicht entfernen

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

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

Lieferfahrzeug verfolgen und Fuhrpark ansehen

In der Ansicht einer Flotte können Sie die Route und die anstehenden Aufgaben für ein bestimmtes Lieferfahrzeug anzeigen. Instanziieren Sie dazu sowohl einen Lieferflotten-Standortanbieter als auch einen Lieferfahrzeug-Standortanbieter und fügen Sie beide der Kartenansicht hinzu:

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [
    deliveryFleetLocationProvider,
    deliveryVehicleLocationProvider,
  ],
  // Any other options
});

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [
    deliveryFleetLocationProvider,
    deliveryVehicleLocationProvider,
  ],
  // Any other options
});

Der Standortanbieter der Lieferflotte beginnt, Lieferfahrzeuge auf der Karte anzuzeigen. Mit der Anpassung von Markierungen kann der Anbieter des Lieferfahrzeugstandorts ein Lieferfahrzeug verfolgen, wenn seine Flottenmarkierung angeklickt wurde:

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params: google.maps.journeySharing.DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

Blenden Sie die Markierung vor dem Anbieter der Lieferfahrzeug-Standort aus, um zu verhindern, dass zwei Markierungen für dasselbe Fahrzeug gerendert werden:

// Specify the customization function either separately, or as a field in 
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params: deliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

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 die Tracking-Karte Ihrer JavaScript-Flotte anwenden möchten, geben Sie beim Erstellen des JourneySharingMapView einen mapId 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.

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

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

Codebasierte Kartenstile verwenden

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

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

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 der JavaScript-Flottenverfolgungsbibliothek können Sie das Design von Markierungen anpassen, die der Karte hinzugefügt werden. Dazu legen Sie Anpassungen für Markierungen fest. Diese werden dann von der Fleet Tracking Library angewendet, bevor sie der Karte hinzugefügt und bei jeder Aktualisierung einer Markierung hinzugefügt werden.

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. Genauer gesagt, übergibt „Flottenverfolgung“ Daten an die Anpassungsfunktion bezüglich des Objekts, das die Markierung darstellt: Fahrzeug, Haltestelle oder Aufgabe. Dadurch kann sich der Stil der Markierung basierend auf dem aktuellen Status des Markierungselements ändern, z. B. anhand der Anzahl der verbleibenden Haltestellen oder der Art der Aufgabe. 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.

Außerdem können Sie Anpassungsfunktionen verwenden, um die Sichtbarkeit von Markierungen zu filtern. Rufen Sie dazu setVisible(false) für die Markierung auf.

Aus Leistungsgründen empfehlen wir jedoch die native Filterung des Standortanbieters, z. B. FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter. Wenn Sie jedoch zusätzliche Filterfunktionen benötigen, können Sie diese mithilfe der Anpassungsfunktion filtern.

Die Bibliothek für das Flotten-Tracking bietet die folgenden Anpassungsparameter:

• FleetEngineDeliveryVehicleLocationProviderOptions
  • deliveryVehicleMarkerCustomization
  • plannedStopMarkerCustomization
  • taskMarkerCustomization
  • taskOutcomeMarkerCustomization
• FleetEngineDeliveryFleetLocationProviderOptions
  • deliveryVehicleMarkerCustomization

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 oben aufgeführten Anpassungsparameter anzupassen.

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

deliveryVehicleMarkerCustomization = {
  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 oben aufgeführten Parameter zur Anpassung der Markierung anzupassen.

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

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 Anpassungsparameter die Klickverarbeitung hinzuzufügen.

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

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

Sichtbare Markierungen filtern

Das folgende Beispiel zeigt, wie Sie filtern, welche Fahrzeugmarkierungen sichtbar sind. Folgen Sie diesem Muster, um Markierungen mithilfe der oben aufgeführten Parameter zur Anpassung von Markierungen zu filtern.

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

Polylinienanpassungen verwenden, wenn du einem Lieferfahrzeug folgst

Mit der JavaScript-Flottenverfolgungsbibliothek können Sie auch das Erscheinungsbild der Route des Fahrzeugs 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 Fahrzeugstatus ändern. So kann das Polyline-Objekt einen tieferen Farbton eingefärbt oder es dicker gemacht werden, wenn das Fahrzeug langsamer fährt. Sie können sogar eine Verknüpfung aus Quellen außerhalb von Fleet Engine herstellen und das Polyline-Objekt anhand dieser Informationen gestalten.

Sie können die Anpassungen mithilfe von Parametern in FleetEngineDeliveryVehicleLocationProviderOptions 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:

• takenPolylineCustomization für einen bereits zurückgelegten Pfad
• activePolylineCustomization für einen aktiv bewegenden Pfad
• remainingPolylineCustomization für einen noch nicht zurückgelegten Pfad.

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.

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

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

Stil von Polyline-Objekten mithilfe von Anpassungsfunktionen ändern

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

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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'});
      }
    }
  };

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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:

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};

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.

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

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.deliveryVehicle) {
    const distance = 
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 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();

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

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  if (e.deliveryVehicle) {
    const distance = 
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 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 die Fahrtfreigabe konfigurieren.

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

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

Vorhandene Karte ersetzen

Sie können eine vorhandene Karte mit Markierungen oder anderen Anpassungen ersetzen, 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, initially centered at Mountain View, CA.
  var map = new google.maps.Map(document.getElementById('map'));
  map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

  // The marker, now 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 die JavaScript-Bibliothek für die Freigabe von Fahrten hinzu, die Flotten-Tracking enthält:

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
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. Use FleetEngineDeliveryVehicleLocationProvider
  // as appropriate.
  locationProvider = new google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProvider({
    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
  });

mapView.addListener('ready', () => {
  locationProvider.deliveryVehicleId = DELIVERY_VEHICLE_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // The map, initially centered at Mountain View, CA.
    var map = mapView.map;
    map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
    // The marker, now 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 journey sharing library to the API loader, which includes Fleet Tracking functionality.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

Wenn Sie ein Lieferfahrzeug mit der angegebenen ID in der Nähe von Uluru betreiben, wird es jetzt auf der Karte gerendert.