Sendungen mit der JavaScript Shipment Tracking Library verfolgen

Mit der JavaScript-Bibliothek für die Sendungsverfolgung können Sie von Fahrzeugen und Orten von Interesse, die in Fleet Engine erfasst werden. Bibliothek eine JavaScript-Kartenkomponente enthält, die als Drop-in-Ersatz fungiert für eine Standardentität google.maps.Map und Datenkomponenten, die verbunden werden sollen mit Fleet Engine. Mit der JavaScript-Bibliothek für die Sendungsverfolgung können Sie über Ihre Webanwendung eine anpassbare, animierte Sendungsverfolgung anbieten.

Komponenten

Die JavaScript Shipment Tracking Library enthält Komponenten zur Visualisierung. des Fahrzeugs und der Route auf dem Weg zu einem Ziel sowie Rohdaten Feeds für die voraussichtliche Ankunftszeit oder die verbleibende Strecke.

Kartenansicht für die Sendungsverfolgung

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

Lieferortanbieter

Ein Lieferortanbieter übermittelt Standortinformationen für verfolgte Objekte. in die Karte für die Sendungsverfolgung auf der ersten und letzten Meile.

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

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

Erfasste Standortobjekte

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

Zielspeicherort

Der Zielort ist der Ort, an dem eine Fahrt endet. Versand ist der Ort der geplanten Aufgabe.

Fahrzeugstandort

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

Abruf von Authentifizierungstokens

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

Stiloptionen

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

Sichtbarkeit von beobachteten Orten festlegen

In diesem Abschnitt werden die Sichtbarkeitseinstellungen für beobachtete Objekte auf der Karte beschrieben. Diese Regeln gelten für zwei Objektkategorien:

  • Standortmarkierung
  • Aufgabendaten

Sichtbarkeit der Standortmarkierung

Alle Standortmarkierungen für Start- und Zielort werden immer auf der Karte angezeigt. Zum Beispiel ist auf der Karte immer der Lieferort einer Sendung zu sehen, unabhängig vom Status der Übermittlung.

Sichtbarkeit von Aufgabendaten

In diesem Abschnitt werden die standardmäßigen Sichtbarkeitsregeln beschrieben, die für Aufgabendaten gelten. z. B. Fahrzeugstandort und verbleibende Route. Sie können viele Aufgaben anpassen, nicht alle:

  • Nicht verfügbare Aufgaben: Sie können die Sichtbarkeit für diese Aufgaben nicht anpassen.
  • Aktive Fahrzeugaufgaben: Sie können diese Art von Aufgaben anpassen.
  • Inaktive Fahrzeugaufgaben: Sie können die Sichtbarkeit für diese Aufgaben nicht anpassen.

Nicht verfügbare Aufgaben

Wenn es mindestens eine Nichtverfügbarkeitsaufgabe gibt (z. B. wenn der Fahrer eine Pause macht oder das Fahrzeug betankt wird) auf der Route mit der verfolgten Aufgabe verknüpft ist, ist das Fahrzeug nicht sichtbar. Voraussichtliche Ankunftszeit Zeit und die geschätzte Fertigstellungszeit der Aufgabe noch verfügbar sind.

Aktive Fahrzeugaufgaben

Die TaskTrackingInfo stellt eine Reihe von Datenelementen bereit, die innerhalb der Bibliothek für die Sendungsverfolgung. Standardmäßig sind diese Felder sichtbar, wenn die Aufgabe die dem Fahrzeug zugewiesen sind und sich innerhalb von 5 Haltestellen vor der Aufgabe befinden. Die endet, wenn die Aufgabe abgeschlossen oder abgebrochen wird. Die Felder sind folgt:

  • Polylinien für Routen
  • Geschätzte Ankunftszeit
  • Geschätzte Fertigstellungszeit für Aufgaben
  • Verbleibende Fahrstrecke zur Aufgabe
  • Anzahl der verbleibenden Haltestellen
  • Fahrzeugstandort

Sie können die Sichtbarkeitskonfiguration für einzelne Aufgaben anpassen, indem Sie die TaskTrackingViewConfig für eine Aufgabe, wenn diese in Fleet Engine erstellt oder aktualisiert wird. Dadurch entstehen Regeln für die Verfügbarkeit einzelner Datenelemente, die auf dem folgenden Kriterien (nachfolgend als Sichtbarkeitsoption bezeichnet):

  • Anzahl der verbleibenden Haltestellen
  • Reisedauer bis zur voraussichtlichen Ankunftszeit
  • Verbleibende Fahrstrecke
  • Immer sichtbar
  • Nie sichtbar

Jedes Datenelement kann nur mit einer Sichtbarkeitsoption verknüpft werden. Kriterien können nicht mit ODER oder UND kombiniert werden.

Im Folgenden finden Sie ein Beispiel für die Anpassung. Für diese Anpassung gelten folgende Regeln:

  • Polylinien der Route anzeigen, wenn sich das Fahrzeug innerhalb von drei Haltestellen befindet.
  • Voraussichtliche Ankunftszeit anzeigen, wenn die verbleibende Fahrstrecke kürzer als 5.000 Meter ist.
  • Die Anzahl der verbleibenden Haltestellen nie anzeigen.
  • Alle anderen Felder behalten die Standardsichtbarkeit bei, die angezeigt wird, wenn das Feld nicht mehr als 5 Haltestellen von der Aufgabe entfernt ist.
"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

Sie können die Standardkonfiguration der Sichtbarkeit für Ihr Projekt auch anpassen, indem Sie Support-Team kontaktieren.

Polylinien für Routen und Sichtbarkeitsregeln für Fahrzeugstandorte:

Wenn Polylinien für Routen sichtbar sind, muss auch der Standort des Fahrzeugs sichtbar sein. Andernfalls kann der Fahrzeugstandort durch das Ende von Polylinien angegeben werden. Das bedeutet, dass die Sichtbarkeitsoption für Polylinien nicht weniger restriktiv sein darf.

Diese Regeln müssen befolgt werden, um gültige Polylinien für Routen / Fahrzeuge bereitzustellen Kombination für Standortsichtbarkeit:

  • Wenn Polylinien für Routen und der Fahrzeugstandort dieselbe Sichtbarkeitsoption haben Typ:

    • Wenn als Sichtbarkeitsoption die Anzahl der Stopps, die Dauer bis zur voraussichtlichen Ankunftszeit oder verbleibende Fahrstrecke müssen, muss für Polylinien der Route ein Wert angegeben werden, der kleiner ist als oder gleich dem Wert ist, der für diese Sichtbarkeitsoption für das Fahrzeug festgelegt ist Standort. Hier ein Beispiel:
    "taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "vehicleLocationVisibility": {
    "remainingStopCountThreshold": 5
  },
}
    • Wenn die Sichtbarkeitsoption für Polylinien der Route immer sichtbar ist, wird der Fahrzeugstandort Außerdem muss die Sichtbarkeitsoption immer sichtbar sein.
    • Wenn für den Fahrzeugstandort die Sichtbarkeitsoption niemals sichtbar ist, werden Polylinien für Routen verwendet. Außerdem muss die Sichtbarkeitsoption niemals sichtbar sein.

  • Wenn Polylinien für Routen und der Fahrzeugstandort unterschiedliche Sichtbarkeitsoptionen haben ist der Fahrzeugstandort nur sichtbar, wenn die Sichtbarkeit beide Optionen zufrieden sind.

    Hier ein Beispiel:

    "taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "vehicleLocationVisibility": {
    "remainingDrivingDistanceMetersThreshold": 3000
  },
}

    In diesem Beispiel ist der Fahrzeugstandort nur sichtbar, wenn die verbleibende Haltestelle Anzahl ist mindestens 3 UND die verbleibende Fahrstrecke beträgt mindestens 3.000 Meter.

Erste Schritte mit der JavaScript Journey Sharing Library

Stellen Sie vor der Verwendung der Bibliothek für das Teilen von JavaScript-Journeys sicher, dass Sie sind mit Fleet Engine vertraut und mit dem Abrufen eines API-Schlüssels.

Wenn du eine Lieferung verfolgen möchtest, musst du zuerst einen Anspruch auf die Tracking-ID erheben.

Tracking-ID-Anspruch erstellen

Um eine Sendung über den Anbieter von Versandorten zu verfolgen, Erstellen eines JSON-Webtokens (JWT) mit einer Tracking-ID-Anforderung

Fügen Sie zum Erstellen der JWT-Nutzlast im Autorisierungsabschnitt eine zusätzliche Anforderung hinzu durch den Schlüssel trackingid. Legen Sie als Wert die Sendungsverfolgungs-ID fest.

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

{
  "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": {
     "trackingid": "tid_54321",
   }
}

Abruf von Authentifizierungstokens erstellen

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

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

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

Die JavaScript Shipment Tracking Library fordert über die Authentifizierung Token-Abruf, wenn eine der folgenden Bedingungen zutrifft:

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

Andernfalls verwendet die Bibliothek das zuvor ausgestellte, noch gültige Token und nutzt nicht den Fetcher aufrufen.

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.expiration_timestamp_ms - Date.now(),
  };
}

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

  • Der Endpunkt muss eine Ablaufzeit für das Token zurückgeben. im Beispiel oben als data.ExpiresInSeconds angegeben.
  • Beim Abrufen von Authentifizierungstokens muss die Ablaufzeit (in Sekunden, ab dem Zeitpunkt des Abrufs) in die Bibliothek übertragen, wie im Beispiel gezeigt.
  • SERVER_TOKEN_URL hängt von Ihrer Back-End-Implementierung ab. Dies sind die URLs für das Back-End der Beispiel-App: <ph type="x-smartling-placeholder">
      </ph>
    • 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-Versandverfolgung geladen wird. Bibliothek über eine angegebene URL. Der callback-Parameter führt die initMap aus. nachdem die API geladen wurde. Mit dem Attribut defer kann der Browser Fahren Sie mit dem Rendern des Rests der Seite fort, während die API geladen wird.

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

Sendung verfolgen

In diesem Abschnitt wird die Verwendung der JavaScript-Bibliothek für die Sendungsverfolgung beschrieben nach der Abholung oder Lieferung einer Sendung. Achten Sie darauf, Bibliothek aus der im Script-Tag angegebenen Callback-Funktion laden bevor Sie den Code ausführen.

Anbieter von Versandorten instanziieren

In der JavaScript Shipment Tracking Library ist ein Standortanbieter vordefiniert für die Fleet Engine Deliveries API. Verwenden Sie Ihre Projekt-ID und einen Verweis auf Ihre 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
        .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',
});

Kartenansicht initialisieren

Nach dem Laden der Bibliothek für das Teilen von Kaufprozessen initialisieren Kartenansicht und fügen sie der HTML-Seite hinzu. Ihre Seite sollte Folgendes enthalten: Ein &lt;div&gt;-Element, das die Kartenansicht enthält Im folgenden Beispiel Das Element &lt;div&gt; heißt &lt;div&gt;.

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

JavaScript

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'), 
  locationProviders: [locationProvider],
  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'),
  locationProviders: [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 an den Standortanbieter bereitgestellte Tracking-ID kann mehreren Aufgaben; beispielsweise eine Abhol- und eine Lieferaufgabe für dasselbe Paket oder mehrere fehlgeschlagene Zustellversuche. Eine Aufgabe wurde ausgewählt, die im Karte zur Sendungsverfolgung. Die anzuzeigende Aufgabe wird wie folgt festgelegt:

  1. Wenn genau eine Abholaufgabe offen ist, wird sie angezeigt. Ein Fehler wird generiert wenn es mehrere offene Abholaufgaben gibt.
  2. Wenn genau eine offene Lieferaufgabe vorhanden ist, wird sie angezeigt. Ein Fehler ist generiert werden, wenn mehrere offene Lieferaufgaben vorhanden sind.
  3. Bei geschlossenen Lieferaufgaben: <ph type="x-smartling-placeholder">
      </ph>
    • Wenn genau eine geschlossene Lieferaufgabe vorhanden ist, wird sie angezeigt.
    • Wenn es mehrere geschlossene Lieferaufgaben gibt, wird die mit der neuesten Ergebniszeit wird angezeigt.
    • Wenn es mehrere geschlossene Lieferaufgaben gibt, von denen keine ein Ergebnis hat wird ein Fehler generiert.
  4. Wenn Abholaufgaben geschlossen sind: <ph type="x-smartling-placeholder">
      </ph>
    • Wenn es genau eine geschlossene Abholaufgabe gibt, wird sie angezeigt.
    • Wenn es mehrere abgeschlossene Abholaufgaben gibt, wird die mit den neuesten Ergebniszeit wird angezeigt.
    • Wenn es mehrere geschlossene Abholaufgaben gibt, von denen keine ein Ergebnis hat wird ein Fehler generiert.
  5. Andernfalls wird keine Aufgabe angezeigt.

Auf Änderungsereignisse warten

Sie können Metainformationen zu einer Aufgabe aus den Aufgaben-Tracking-Informationen abrufen. mithilfe des Standortanbieters. Die Metainformationen umfassen die voraussichtliche Ankunftszeit, Anzahl der verbleibenden Stopps und verbleibende Strecke vor dem Abholen oder der Lieferung. Änderungen an den Metainformationen lösen ein update-Ereignis aus. Im folgenden Beispiel zeigt, wie auf diese Änderungsereignisse gewartet wird.

JavaScript

locationProvider.addListener('update', e => {
  // e.taskTrackingInfo 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.taskTrackingInfo contains data that may be useful
  // to the rest of the UI.
  console.log(e.taskTrackingInfo.remainingStopCount);
});

Fehler verarbeiten

Fehler, die asynchron durch das Anfordern von Versandinformationen auftreten error-Ereignisse. Das folgende Beispiel zeigt, wie auf diese Ereignisse gewartet wird 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:Bibliotheksaufrufe müssen in try...catch-Blöcken umschlossen werden. um unerwartete Fehler zu beheben.

Nicht mehr beobachten

Wenn Sie verhindern möchten, dass der Standortanbieter die Sendung verfolgt, entfernen Sie die Sendungsverfolgungs-ID. vom Standortanbieter.

JavaScript

locationProvider.trackingId = '';

TypeScript

locationProvider.trackingId = '';

Standortanbieter aus der Kartenansicht entfernen

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Design der Basiskarte anpassen

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

Cloudbasiertes Gestalten von Karteninhalten verwenden

Cloudbasiertes Gestalten von Karteninhalten können Sie Kartenstile für alle Ihre Apps erstellen und bearbeiten, in denen Google Maps verwendet wird. über die Google Cloud Console erstellen, ohne dass Änderungen am Code erforderlich sind. Die Kartenstile werden als Karten-IDs in Ihrem Cloud-Projekt gespeichert. So wenden Sie einen Stil auf Ihrer JavaScript-Karte der Versandverfolgung, geben Sie mapId beim Erstellen der JourneySharingMapView. Das Feld „mapId“ kann nicht geändert werden oder hinzugefügt werden, nachdem JourneySharingMapView instanziiert wurde. Die folgenden In diesem Beispiel wird gezeigt, 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'
  }
  // Any other styling options.
});

TypeScript

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

Codebasiertes Gestalten von Karteninhalten verwenden

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

JavaScript

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

TypeScript

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

Benutzerdefinierte Markierungen verwenden

Mit der JavaScript Shipment Tracking Library können Sie das Aussehen und die auf der Karte hinzugefügte Markierungen. Geben Sie dazu eine Markierung Anpassungen, die von der Versandverfolgungsbibliothek vor dem Hinzufügen Markierungen auf der Karte und bei jeder Markierungsaktualisierung hinzugefügt.

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

Eine erweiterte Option besteht darin, eine Anpassungsfunktion anzugeben. Anpassung -Funktionen ermöglichen die Gestaltung von Markierungen basierend auf Daten sowie das Hinzufügen von Interaktivität von Markierungen, wie z. B. Klickhandhabung. Insbesondere Versand Bei der Verfolgung werden Daten über den Objekttyp, der Markierung steht für: Fahrzeug oder Ziel. Dadurch können die Stile der Markierungen Sie ändern sich basierend auf dem aktuellen Status des Markierungselements selbst. Beispiel: Der Anzahl der verbleibenden Haltestellen bis zum Ziel Sie können sogar Daten von Quellen außerhalb von Fleet Engine vergleichen und die Markierung diese Informationen.

Die Bibliothek für die Sendungsverfolgung bietet die folgenden Anpassungsparameter in FleetEngineShipmentLocationProviderOptions:

Den Stil von Markierungen mit MarkerOptions ändern

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

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Den Stil von Markierungen mithilfe von Anpassungsfunktionen ändern

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

JavaScript

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

TypeScript

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

Click Handling zu Markierungen

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

JavaScript

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

TypeScript

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

Polylinienanpassungen verwenden

Mit der Shipment Tracking Library können Sie auch das Erscheinungsbild der Route auf der Karte zu sehen. Die Bibliothek erstellt ein google.maps.Polyline -Objekt für jedes Koordinatenpaar in den aktiven oder verbleibenden Koordinaten path. Sie können die Polyline-Objekte gestalten, indem Sie Polylinienanpassungen angeben. Die werden diese Anpassungen dann in zwei Situationen angewendet: -Objekten zur Karte hinzugefügt wird und wann sich die für die -Objekte verwendeten Daten geändert haben.

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

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

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

Stil von Polyline-Objekten mit PolylineOptions ändern

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

JavaScript

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

TypeScript

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

Den Stil von Polyline-Objekten mithilfe von Anpassungsfunktionen ändern

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

JavaScript

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

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

Sichtbarkeit von Polyline-Objekten steuern

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

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

InfoWindow für eine Fahrzeug- oder Standortmarkierung anzeigen

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

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

JavaScript

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

locationProvider.addListener('update', e => {
  const stopsCount =
      e.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();

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

Automatische Anpassung deaktivieren

Sie können verhindern, dass der Darstellungsbereich der Karte automatisch an das Fahrzeug angepasst wird und berechnet die Route, indem Sie die automatische Anpassung deaktivieren. Im folgenden Beispiel zeigt, wie Sie die automatische Anpassung beim Konfigurieren der Freigabe der Reise deaktivieren Kartenansicht.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [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

Mit der JavaScript Shipment Tracking Library eine vorhandene Karte, die Markierungen oder andere Anpassungen enthält ohne die Anpassungen zu verlieren.

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

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, 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 Bibliothek für das Teilen von JavaScript-Reisen hinzu:

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

Das folgende Beispiel zeigt die erforderlichen Änderungen:

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

// (1) Authentication Token Fetcher
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'),
    locationProviders: [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 verfolgtes Paket mit der ID in der Nähe von Uluru angegeben haben, wird sie jetzt auf der Karte gerendert.