Sendungen mit der JavaScript Shipment Tracking Library verfolgen

Mit der JavaScript Shipment Tracking Library können Sie den Standort von Fahrzeugen und relevanten Orten in Fleet Engine visualisieren. Die Bibliothek enthält eine JavaScript-Kartenkomponente, die als Drop-in-Ersatz für eine google.maps.Map-Standardentität und Datenkomponenten dient, um eine Verbindung zu Fleet Engine herzustellen. Mit der JavaScript Shipment Tracking Library können Sie eine anpassbare, animierte Versandverfolgungsfunktion in Ihrer Webanwendung bereitstellen.

Komponenten

Die JavaScript Shipment Tracking Library bietet Komponenten zur Visualisierung des Fahrzeugs und der Route bei der Fahrt zu einem Ziel sowie Rohdatenfeeds für die voraussichtliche Ankunftszeit und die verbleibende Fahrstrecke.

Kartenansicht für das Versand-Tracking

In der Komponente „Kartenansicht“ wird der Standort von Fahrzeugen und Zielen visuell dargestellt. Wenn die Route für ein Fahrzeug bekannt ist, wird diese in der Kartenansicht animiert, wenn sie sich über den vorhergesagten Pfad bewegt.

Anbieter des Versandorts

Ein Anbieter von Versandstandorten überträgt auf der Karte für die Versandverfolgung für die erste und letzte Meile Standortinformationen für beobachtete Objekte.

Mit dem Anbieter für den Versandort können Sie Folgendes nachverfolgen:

• Der Abhol- oder Lieferort einer Sendung.
• Standort und Route des Lieferfahrzeugs.

Erfasste Standortobjekte

Der Standortanbieter verfolgt den Standort von Objekten wie Fahrzeugen und Zielen.

Zielspeicherort

Der Zielort ist der Ort, an dem eine Fahrt endet. Für die Sendungsverfolgung ist dies der geplante Aufgabenort.

Fahrzeugstandort

Der Fahrzeugstandort ist der erfasste Standort eines Fahrzeugs. Es kann optional eine Route für das Fahrzeug enthalten.

Authentifizierungstoken-Abruf

Zum Steuern des Zugriffs auf die in Fleet Engine gespeicherten Standortdaten müssen Sie auf Ihrem Server einen JWT-Mining-Dienst für JSON Web Token implementieren. Implementieren Sie dann einen Authentifizierungstoken-Abruf als Teil Ihrer Webanwendung. Verwenden Sie dazu die JavaScript Journey Sharing Library, um den Zugriff auf die Standortdaten zu authentifizieren.

Stiloptionen

Mit dem Stil von Markierungen und Polylinien wird das Erscheinungsbild der beobachteten Standortobjekte auf der Karte bestimmt. Mit benutzerdefinierten Stiloptionen können Sie den Standardstil ändern, damit er dem Stil Ihrer Webanwendung entspricht.

Sichtbarkeit von beobachteten Standorten steuern

In diesem Abschnitt werden die standardmäßigen Sichtbarkeitseinstellungen für beobachtete Objekte auf der Karte beschrieben. Sie sind in der Fleet Engine als vordefinierte Regeln vorhanden. Sie können diese Regeln ändern, indem Sie sich an das Supportteam wenden.

Diese Regeln gelten für zwei Objektkategorien:

• Standortmarkierung
• Fahrzeugstandort

Sichtbarkeit von Standortmarkierungen

Alle Standortmarkierungen für Start-, Ziel- und Fahrzeughaltestellen werden immer auf der Karte angezeigt. Beispielsweise ist auf der Karte immer der Lieferort zu sehen, unabhängig vom Status der Lieferung.

Sichtbarkeit des Fahrzeugstandorts

In diesem Abschnitt werden die standardmäßigen Sichtbarkeitsregeln beschrieben, die während der aktiven Aufgabenverwaltung für den Fahrzeugstandort gelten. Sie können viele, aber nicht alle Aufgaben anpassen:

• Aufgaben zur Nichtverfügbarkeit: Sie können die Sichtbarkeit dieser Aufgaben nicht anpassen.
• Aktive Fahrzeugaufgaben: Sie können diese Aufgaben anpassen.
• Inaktive Fahrzeugaufgaben: Sie können die Sichtbarkeit dieser Aufgaben nicht anpassen.

Aufgaben zur Nichtverfügbarkeit

Wenn es mindestens eine Nichtverfügbarkeitsaufgabe auf der Route zu der verfolgten Aufgabe gibt (z. B. wenn der Fahrer eine Pause macht oder das Fahrzeug aufgeladen wird), ist das Fahrzeug nicht sichtbar. Die geschätzte Ankunftszeit und die geschätzte Zeit bis zum Abschluss der Aufgabe sind noch verfügbar.

Aktive Fahrzeugaufgaben

Standardmäßig bietet ein TaskTrackingInfo-Protokoll eine Reihe von Datenelementen, die in der Shipment Tracking Library sichtbar gemacht werden können. Die Sichtbarkeit dieser Felder ist verfügbar, wenn die Aufgabe dem Fahrzeug zugewiesen ist und sich das Fahrzeug innerhalb von 5 Haltestellen befindet. Die Sichtbarkeit endet, wenn die Aufgabe abgeschlossen oder abgebrochen wurde. Erläuterung der Felder:

• Polylinien der Route
• Geschätzte Ankunftszeit
• Geschätzte Dauer bis zur Aufgabe
• Verbleibende Fahrstrecke zur Aufgabe
• Anzahl der verbleibenden Haltestellen
• Fahrzeugstandort

Wenn Sie die Sichtbarkeitskonfiguration für Ihr Projekt anpassen möchten, wenden Sie sich an das Supportteam. Vorher sollten Sie eine Liste der Optionen und einen Plan für Ihre Konfiguration haben. Folgende Datenelemente können angepasst werden:

• Anzahl der verbleibenden Haltestellen
• Dauer bis zur geschätzten Ankunftszeit
• Verbleibende Fahrstrecke
• Immer sichtbar
• Nie sichtbar

Ein Beispiel für eine Anpassung sind die Polylinien der Routen, wenn das Fahrzeug innerhalb von 3 Haltestellen liegt, und die voraussichtliche Ankunftszeit, wenn die verbleibende Fahrstrecke kürzer als 5.000 Meter ist. Jedes Datenelement kann nur einer Sichtbarkeitsoption zugeordnet werden.

Erste Schritte mit der JavaScript Journey Sharing Library

Bevor Sie die JavaScript Journey Sharing Library verwenden, sollten Sie sich mit Fleet Engine und dem Abrufen eines API-Schlüssels vertraut machen.

Um eine Lieferung zu erfassen, müssen Sie zuerst einen Tracking-ID-Anspruch erstellen.

Anspruch auf Tracking-ID erstellen

Wenn Sie eine Sendung über den Anbieter von Versandstandorten verfolgen möchten, erstellen Sie ein JSON Web Token (JWT) mit einer Tracking-ID-Anforderung.

Zum Erstellen der JWT-Nutzlast fügen Sie im Autorisierungsbereich eine zusätzliche Anforderung mit dem Schlüssel trackingid hinzu. Legen Sie als Wert die Versand-Tracking-ID fest.

Das folgende Beispiel zeigt, wie Sie ein Token für die Tracking-ID erstellen:

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "[e-mail]",
  "sub": "[e-mail]",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
     "trackingid": "tid_54321",
   }
}

Authentifizierungstoken-Abruf erstellen

Sie können mit einem Dienstkontozertifikat für Ihr Projekt einen Authentifizierungstoken-Abruf erstellen, um auf Ihren Servern ein geprägtes Token abzurufen. Es ist wichtig, dass Sie auf Ihren Servern nur Tokens erstellen und Ihre Zertifikate nicht mit Clients teilen. Andernfalls gefährden Sie die Sicherheit Ihres Systems.

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

JavaScript

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.Token,
    expiresInSeconds: data.ExpiresInSeconds
  };
}

Beim Implementieren des serverseitigen Endpunkts zum Erstellen von Tokens ist Folgendes zu beachten:

• Der Endpunkt muss eine Ablaufzeit für das Token zurückgeben. Im Beispiel oben wird er als data.ExpiresInSeconds angegeben.
• Der Authentifizierungstoken-Abruf muss die Ablaufzeit (in Sekunden ab dem Zeitpunkt der Ausstellung) an die Bibliothek übergeben, wie im Beispiel gezeigt.
• SERVER_TOKEN_URL hängt von Ihrer Back-End-Implementierung ab. Hier 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/flottenleser

Karte aus HTML laden

Das folgende Beispiel zeigt, wie die JavaScript Shipment Tracking-Bibliothek von einer angegebenen URL geladen wird. Der Parameter callback führt die Funktion initMap aus, nachdem die API geladen wurde. Mit dem Attribut defer kann der Browser den Rest der Seite 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>

Sendung verfolgen

In diesem Abschnitt wird gezeigt, wie Sie die JavaScript Shipment Tracking Library verwenden können, um einen Versandauftrag zur Abholung oder Lieferung abzurufen. Bevor Sie den Code ausführen, müssen Sie die Bibliothek aus der im Skript-Tag angegebenen Callback-Funktion laden.

Anbieter von Versandort instanziieren

Die JavaScript Shipment Tracking Library definiert vorab einen Standortanbieter für die Fleet Engine Deliveries API. Verwenden Sie Ihre Projekt-ID und einen Verweis auf die Token-Factory, um sie zu instanziieren.

JavaScript

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

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

TypeScript

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

          // Optionally, you may specify tracking ID to
          // immediately start tracking.
          trackingId: 'your-tracking-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 sollte ein <div>-Element mit der Kartenansicht enthalten. Im folgenden Beispiel hat das Element <div> den Namen map_canvas.

Um Race-Bedingungen zu vermeiden, legen Sie die Tracking-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'), 
  locationProvider: locationProvider,
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-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({
  document.getElementById('map_canvas'),
  locationProvider: locationProvider,
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
 // Any undefined styling options will use defaults.
});

// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-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);

Tracking-ID

Die dem Standortanbieter bereitgestellte Tracking-ID kann mehreren Aufgaben entsprechen, z. B. einer Abholung und einer Lieferaufgabe für dasselbe Paket oder mehreren fehlgeschlagenen Zustellungsversuchen. Eine Aufgabe ist ausgewählt, die auf der Sendungsverfolgungs-Karte angezeigt wird. Die anzuzeigende Aufgabe wird so bestimmt:

1. Wenn genau eine Aufgabe zur Abholung vorhanden ist, wird sie angezeigt. Wenn mehrere offene Abholaufgaben vorhanden sind, wird ein Fehler generiert.
2. Wenn genau eine offene Auslieferungsaufgabe vorhanden ist, wird sie angezeigt. Ein Fehler wird generiert, wenn mehrere offene Bereitstellungsaufgaben vorhanden sind.
3. Wenn es geschlossene Aufgaben gibt:
   • Wenn genau eine abgeschlossene Auslieferungsaufgabe vorhanden ist, wird sie angezeigt.
   • Wenn es mehrere geschlossene Zustellungsaufgaben gibt, wird diejenige mit der letzten Ankunftszeit angezeigt.
   • Wenn es mehrere geschlossene Bereitstellungsaufgaben gibt, von denen keine eine Ergebniszeit hat, wird ein Fehler generiert.
4. Wenn geschlossene Abholaufgaben vorliegen:
   • Wenn genau eine abgeschlossene Abholaufgabe vorliegt, wird sie angezeigt.
   • Wenn es mehrere geschlossene Abholaufgaben gibt, wird diejenige mit der letzten Ankunftszeit angezeigt.
   • Wenn es mehrere geschlossene Abholaufgaben gibt, von denen keine davon eine Ergebniszeit hat, wird ein Fehler generiert.
5. Andernfalls wird keine Aufgabe angezeigt.

Änderungsereignisse anhören

Mit dem Standortanbieter können Sie Metainformationen zu einer Aufgabe aus dem Objekt für das Aufgaben-Tracking abrufen. Die Metainformationen umfassen die voraussichtliche Ankunftszeit, die Anzahl der verbleibenden Haltestellen und die verbleibende Entfernung vor der Abholung oder der Lieferung. Änderungen an den Metainformationen lösen ein update-Ereignis aus. Das folgende Beispiel zeigt, wie Sie diese Änderungsereignisse überwachen.

JavaScript

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

TypeScript

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

Fehler verarbeiten

Fehler, die asynchron aus dem Anfordern von Versandinformationen auftreten, lösen error-Ereignisse aus. Das folgende Beispiel zeigt, wie Sie auf diese Ereignisse achten, um Fehler zu beheben.

JavaScript

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

TypeScript

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

Hinweis:Sie müssen Bibliotheksaufrufe in try...catch-Blöcken umschließen, um unerwartete Fehler zu beheben.

Design der Basiskarte anpassen

Wenn Sie das Design der Maps-Komponente anpassen möchten, können Sie die Karte mit cloudbasierten Tools gestalten oder Optionen direkt im Code festlegen.

Cloudbasierte Kartenstile verwenden

Mit cloudbasierten Kartenstilen können Sie Kartenstile für Apps erstellen und bearbeiten, die Google Maps über die Google Cloud Console verwenden, ohne dass Sie Ihren Code ändern müssen. Die Kartenstile werden als Karten-IDs in Ihrem Cloud-Projekt gespeichert. Wenn du einen Stil auf deine JavaScript-Sendungsverfolgungskarte anwenden möchtest, gib beim Erstellen von JourneySharingMapView eine mapId an. Das Feld mapId kann nicht geändert oder hinzugefügt werden, nachdem JourneySharingMapView instanziiert wurde. Das folgende Beispiel zeigt, wie Sie einen zuvor erstellten Kartenstil mit einer Karten-ID aktivieren.

JavaScript

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

TypeScript

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

Codebasierte Kartenstile verwenden

Eine weitere Möglichkeit zum Anpassen des Kartenstils besteht darin, beim Erstellen von JourneySharingMapView mapOptions festzulegen.

JavaScript

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

TypeScript

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

Stil und Sichtbarkeit von Routen ändern

Mit benutzerdefinierten Stiloptionen können Sie den Stil und die Sichtbarkeit der angenommenen und erwarteten Routen konfigurieren. Weitere Informationen finden Sie unter PolylineOptions-Oberfläche.

Das folgende Beispiel zeigt, wie Sie den Stil und die Sichtbarkeit erwarteter Routen konfigurieren. Verwenden Sie takenRoutePolylineSetup anstelle von anticipatedRoutePolylineSetup, um den Stil und die Sichtbarkeit der zurückgelegten Routen zu konfigurieren.

JavaScript

// This function is specified in the 
// JourneySharingMapView constructor's options 
// parameter.
function anticipatedRoutePolylineSetup({
    defaultPolylineOptions, defaultVisible}) {
  // If this function is not specified, the 
  // PolylineOptions object contained in 
  // defaultPolylineOptions is used to render the
  // anticipated route polyline. visible property sets the
  // polyline's visibility. Modify this object and 
  // pass it back to customize the style of the map.
  defaultPolylineOptions.strokeOpacity = 0.5;
  defaultPolylineOptions.strokeColor = 'red';
  return {
    polylineOptions: defaultPolylineOptions,
    visible: true
  };
}

// As an alternative, set a static PolylineOptions to 
// use for the anticipated route:
const anticipatedRoutePolylineOptionsSetup = {
  polylineOptions: {
    strokeOpacity: 0.5,
    strokeColor: 'red',
    …
  },
  visible: true,
};

TypeScript

// This function is specified in the 
// JourneySharingMapView constructor's options 
// parameter.
function anticipatedRoutePolylineSetup(options: {
  defaultPolylineOptions: google.maps.PolylineOptions,
  visible: boolean,
}): {
  polylineOptions: google.maps.PolylineOptions,
  visible: boolean,
} {
  // If this function is not specified, the 
  // PolylineOptions object contained in 
  // defaultPolylineOptions is used to render the
  // anticipated route polyline. visible property sets the
  // polyline's visibility. Modify this object and 
  // pass it back to customize the style of the map.
  options.defaultPolylineOptions.strokeOpacity = 0.5;
  options.defaultPolylineOptions.strokeColor = 'red';
  return {
    polylineOptions: options.defaultPolylineOptions,
    visible: true
  };
}

// As an alternative, set a static PolylineOptions to 
// use for the anticipated route:
const anticipatedRoutePolylineSetup = {
  polylineOptions: {
    strokeOpacity: 0.5,
    strokeColor: 'red',
    …
  },
  visible: true,
};

Markierungsanpassungen verwenden

Mit der JavaScript Shipment Tracking Library können Sie das Design der Markierungen anpassen, die der Karte hinzugefügt werden. Dazu legen Sie Markierungsanpassungen fest, die die „Shipment Tracking Library“ (Lieferungsverfolgungsbibliothek) dann vor dem Hinzufügen von Markierungen zur Karte und bei jeder Aktualisierung der Markierung anwenden.

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

Eine erweiterte Option besteht darin, eine Anpassungsfunktion anzugeben. Anpassungsfunktionen ermöglichen die Gestaltung von Markierungen auf der Grundlage von Daten sowie das Hinzufügen von Interaktivität zu Markierungen (z. B. Klickbehandlung). Das Versand-Tracking übergibt Daten an die Anpassungsfunktion an den Objekttyp, den die Markierung repräsentiert: Fahrzeug oder Ziel. Dann kann sich der Stil der Markierungen je nach aktuellem Status des Markierungselements selbst ändern. Beispiel: Die Anzahl der geplanten Haltestellen bis zum Ziel. Sie können sogar Daten aus Quellen außerhalb von Fleet Engine zusammenführen und die Markierung basierend auf diesen Informationen gestalten.

Die Shipment Tracking-Bibliothek bietet die folgenden Anpassungsparameter in FleetEngineShipmentLocationProviderOptions:

• deliveryVehicleMarkerCustomization
• destinationMarkerCustomization

Den Stil von Markierungen mit MarkerOptions ändern

Das folgende Beispiel zeigt, wie Sie das Design einer Fahrzeugmarkierung mit einem MarkerOptions-Objekt konfigurieren. Mit diesem Muster können Sie das Design einer Markierung anpassen. Verwenden Sie dazu eine der oben aufgeführten Einstellungen.

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Stile von Markierungen mithilfe von Anpassungsfunktionen ändern

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

JavaScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

Klickbehandlung zu Markierungen hinzufügen

Das folgende Beispiel zeigt, wie eine Klickmarkierung zu einer Fahrzeugmarkierung hinzugefügt wird. Folgen Sie diesem Muster, um die Klickbehandlung mit einem der oben aufgeführten Parameter zur Markierungsanpassung einer beliebigen Markierung hinzuzufügen.

JavaScript

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

TypeScript

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

Eine InfoWindow für eine Fahrzeug- oder Standortmarkierung anzeigen

Mit InfoWindow kannst du zusätzliche Informationen zu einer Fahrzeug- oder Standortmarkierung einblenden.

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.taskTrackingInfo.remainingStopCount;
  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 die Karte automatisch den Darstellungsbereich an das Fahrzeug und die erwartete Route anpasst, indem Sie die automatische Anpassung deaktivieren. Im folgenden Beispiel wird gezeigt, wie Sie die automatische Anpassung deaktivieren, wenn Sie die Kartenansicht zum Teilen der Route konfigurieren.

JavaScript

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

TypeScript

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

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  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();

Vorhandene Karte ersetzen

Sie können die JavaScript Shipment Tracking Library verwenden, um eine vorhandene Karte mit Markierungen oder anderen Anpassungen zu ersetzen, ohne diese Anpassungen zu verlieren.

Angenommen, Sie haben eine Webseite mit der 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 Journey Sharing-Bibliothek 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 die Anpassung in die Callback-Funktion für die Initialisierung der Kartenansicht.
5. Fügen Sie die Standortbibliothek zum API-Loader 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.
  locationProvider = new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
    YOUR_PROVIDER_ID,
    authTokenFetcher,
  });

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

  locationProvider.trackingId = TRACKING_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.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

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