Google verwendet KI-Technologie, um Inhalte in Ihre bevorzugte Sprache zu übersetzen. KI-Übersetzungen können Fehler enthalten.

Sendung verfolgen

Nachdem Sie das JavaScript Consumer SDK für geplante Aufgaben eingerichtet haben, können Sie eine Lieferung mit Ihrer Verbraucher-App verfolgen. In diesem Dokument werden die folgenden wichtigen Schritte dieses Prozesses beschrieben:

Karte initialisieren und die geteilte Fahrt anzeigen
Fortschritt des Lernpfads aktualisieren und verfolgen
Sendung nicht mehr verfolgen
Fehler bei der Sendungsverfolgung beheben

Karte einrichten

Wenn Sie eine Abholung oder Lieferung in Ihrer Web-App verfolgen möchten, müssen Sie eine Karte laden und das Consumer SDK instanziieren, um mit der Sendungsverfolgung zu beginnen. Sie können entweder eine neue Karte laden oder eine vorhandene verwenden. Anschließend instanziieren Sie das Consumer SDK mit der Initialisierungsfunktion, damit die Kartenansicht dem Standort des verfolgten Elements entspricht.

Neue Karte mit der Google Maps JavaScript API laden

Wenn Sie eine neue Karte erstellen möchten, laden Sie die Google Maps JavaScript API in Ihre Webanwendung. Im folgenden Beispiel wird gezeigt, wie Sie die Google Maps JavaScript API laden, das SDK aktivieren und die Initialisierungsprüfung auslösen.

Der Parameter callback führt die Funktion initMap aus, nachdem die API geladen wurde.
Mit dem Attribut defer kann der Browser den Rest Ihrer Seite weiter rendern, während die API geladen wird.

Verwenden Sie die Funktion initMap, um das Consumer SDK zu instanziieren. Beispiel:

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

Vorhandene Karte laden

Sie können auch eine vorhandene Karte laden, die mit der Google Maps JavaScript API erstellt wurde, z. B. eine, die Sie bereits verwenden.

Angenommen, Sie haben eine Webseite mit einer Standard-google.maps.Map-Entität, auf der eine Markierung wie im folgenden HTML-Code definiert angezeigt wird. Hier wird die Karte mit derselben initMap-Funktion im Callback am Ende angezeigt:

    <!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 Pier 39 in San Francisco
          var pier39 = {lat: 37.809326, lng: -122.409981};
          // 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 Pier 39
          var marker = new google.maps.Marker({position: pier39, map: map});
        }
        </script>
        <!-- Load the API from the specified URL.
           * The defer attribute allows the browser to render the page while the API loads.
           * The key parameter contains your own API key.
           * 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>

Anbieter von Sendungsstandorten instanziieren

Verwenden Sie den Anbieter für den Sendungsstandort zusammen mit dem zuvor definierten Abrufprogramm für Autorisierungstokens, um Daten von der Fleet Engine zu empfangen.

In diesen Beispielen wird gezeigt, wie der Standortanbieter instanziiert wird.

JavaScript

const locationProvider =
  new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
      projectId: 'your-project-id',
      authTokenFetcher: authTokenFetcher,  // the fetcher defined previously
  });

TypeScript

const locationProvider =
  new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
      projectId: 'your-project-id',
      authTokenFetcher: authTokenFetcher,  // the fetcher defined previously
  });

Gemeinsame Fahrt anzeigen

Wenn Sie den Fortschritt einer geplanten Aufgabe anzeigen möchten, initialisieren Sie die Ansicht. Dadurch wird der Frame für die Karte so festgelegt, dass er dem Standort der verfolgten Fahrt entspricht. Der Fortschritt wird dann vom Consumer SDK bereitgestellt, nachdem es die Informationen von Fleet Engine erhalten hat.

Tipps:

Ihre Seite muss ein <div>-Element enthalten, das die Kartenansicht enthält. Im folgenden Beispiel heißt das <div>-Element map_canvas.
Beachten Sie die Standardregeln für die Sichtbarkeit, die Fleet Engine auf getrackte Fahrten anwendet. Sie können auch Sichtbarkeitsregeln für aktive Fahrzeuglieferungen und geplante Stoppaufgaben konfigurieren. Weitere Informationen finden Sie unter Sichtbarkeit von Aufgaben anpassen im Leitfaden Aufgaben konfigurieren.

In diesen Beispielen wird gezeigt, wie eine Kartenansicht initialisiert wird.

JavaScript

function initMap() {
  const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map_canvas'),
    // Any undefined styling options use defaults.
  });

  // If you did not specify a tracking ID in the location
  // provider constructor, you may do so here.
  // Location tracking starts 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

function initMap() {
  const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map_canvas'),
   // 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 starts 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);
}

Versandstatus aktualisieren

Sie können auf Ereignisse warten und den Fortschritt der Sendung im Verlauf einer Fahrt aktualisieren. Verwenden Sie den Standortanbieter, um Metainformationen aus dem taskTrackingInfo-Objekt abzurufen. Änderungen an den Metainformationen lösen ein Aktualisierungsereignis aus. Das Objekt taskTrackingInfo bietet Folgendes:

Voraussichtlicher Abschluss
Anzahl der verbleibenden Zwischenstopps
Verbleibende Entfernung bis zur Abholung oder Lieferung

Das folgende Beispiel zeigt, wie Sie auf diese Änderungsereignisse warten können.

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

Kriterien für mehrere Aufgaben anzeigen

Das Consumer SDK für geplante Aufgaben zeigt nur eine Aufgabe pro Tracking-ID auf der Karte an. In der Regel weisen Sie einem bestimmten Versandgut jedoch auch eine Tracking-ID zu, die während des gesamten Transports in Ihrem System mit dem Gut verknüpft bleibt. Das bedeutet, dass eine einzelne Tracking-ID mit mehreren Aufgaben verknüpft sein kann, z. B. mit einer Abholaufgabe, gefolgt von einer Lieferaufgabe für dasselbe Paket, oder mit mehreren fehlgeschlagenen Versandaufgaben für ein Paket.

Um diese Situation zu bewältigen, wendet die Fleet Engine Kriterien für die Anzeige von Aufgaben an, die in der folgenden Tabelle aufgeführt sind.

Aufgabenkriterien	Ergebnis
Abholaufgaben öffnen
Genau eine vorhanden	Aufgabe anzeigen
Mehrere vorhanden	Fehler generieren
Geschlossene Abholaufgaben
Genau eine vorhanden	Aufgabe anzeigen
Mehrere vorhanden (einige mit Ergebniszeiten)	Aufgabe mit dem letzten Ergebniszeitpunkt anzeigen
Mehrere vorhanden (keine mit Ergebniszeiten)	Fehler generieren
Lieferaufgaben öffnen
Genau eine vorhanden	Aufgabe anzeigen
Mehrere vorhanden	Fehler generieren
Geschlossene Lieferaufgaben
Genau eine vorhanden	Aufgabe anzeigen
Mehrere vorhanden (einige mit Ergebniszeiten)	Aufgabe mit dem letzten Ergebniszeitpunkt anzeigen
Mehrere vorhanden (keine mit Ergebniszeiten)	Fehler generieren

Sendung nicht mehr verfolgen

Wenn eine Sendung abgeschlossen oder abgebrochen wird, sollte Ihre Verbraucher-App die Sendung nicht mehr verfolgen. Dazu müssen die Tracking-ID und der Standortanbieter aus der Kartenansicht entfernt werden. Details zu diesen Schritten finden Sie in den folgenden Abschnitten.

Tracking-ID entfernen

Wenn Sie verhindern möchten, dass der Standortanbieter die Sendung verfolgt, entfernen Sie die Tracking-ID vom Standortanbieter. Die folgenden Beispiele zeigen, wie das funktioniert.

JavaScript

locationProvider.trackingId = '';

TypeScript

locationProvider.trackingId = '';

Standortanbieter aus der Kartenansicht entfernen

Im folgenden Beispiel wird gezeigt, wie ein Standortanbieter aus der Kartenansicht entfernt wird.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Fehler bei der Sendungsverfolgung beheben

Fehler, die asynchron beim Anfordern von Versandinformationen auftreten, lösen error-Ereignisse aus. Das folgende Beispiel zeigt, wie Sie diese Ereignisse überwachen, 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: Achten Sie darauf, Bibliotheksaufrufe in try...catch-Blöcke einzuschließen, um unerwartete Fehler zu beheben.

Nächste Schritte

Karte gestalten

Sendung verfolgen Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Karte einrichten

Neue Karte mit der Google Maps JavaScript API laden

Vorhandene Karte laden

Anbieter von Sendungsstandorten instanziieren

JavaScript

TypeScript

Gemeinsame Fahrt anzeigen

JavaScript

TypeScript

Versandstatus aktualisieren

JavaScript

TypeScript

Kriterien für mehrere Aufgaben anzeigen

Sendung nicht mehr verfolgen

Tracking-ID entfernen

JavaScript

TypeScript

Standortanbieter aus der Kartenansicht entfernen

JavaScript

TypeScript

Fehler bei der Sendungsverfolgung beheben

JavaScript

TypeScript

Nächste Schritte

Sendung verfolgen