Sendung verfolgen

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

  • Karte initialisieren und die gemeinsame Route anzeigen
  • Aktualisieren und Fortschritt verfolgen
  • Teilen der Reise beenden
  • Fehler verarbeiten

Karte einrichten

Wenn Sie den Status einer Sendungsabholung oder -zustellung in Ihrer Webanwendung verfolgen möchten, müssen Sie eine Karte laden und das Consumer SDK instanziieren, um die Sendung zu verfolgen. Du kannst Folgendes laden: eine neue Karte zu erstellen oder eine vorhandene zu verwenden. Dann verwenden Sie die Initialisierung um das Consumer SDK zu instanziieren, sodass die Kartenansicht dem Standort des beobachteten Artikels.

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.

  • Mit dem Parameter callback wird die Funktion initMap ausgeführt, nachdem die API geladen wurde.
  • Mithilfe des Attributs defer kann der Browser den Rest Ihrer 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, die Sie bereits nutzen.

Angenommen, Sie haben eine Webseite mit einem Standard-google.maps.Map-Element, auf dem eine Markierung angezeigt wird, wie im folgenden HTML-Code definiert. Dieses zeigt Ihre Karte mit derselben initMap-Funktion im Callback am Ende an:

    <!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 Versandorten instanziieren

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

Diese Beispiele zeigen, 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
  });

Geteilte Fahrt anzeigen

Damit die Karte die geteilte Fahrt anzeigt, müssen Sie die Ansicht initialisieren. Dadurch wird der Frame für die Karte so festgelegt, dass er dem Standort der erfassten Fahrt entspricht, der vom Consumer SDK bereitgestellt wird, nachdem es die Informationen von der Fleet Engine erhalten hat.

Tipps:

  1. Ihre Seite muss das Element <div> enthalten, das die Kartenansicht enthält. Im folgenden Beispiel heißt das Element <div> map_canvas.

  2. Beachten Sie die Standardregeln für die Sichtbarkeit, die von Fleet Engine auf das Tracking angewendet werden Reisen. Du kannst auch Sichtbarkeitsregeln für ein aktives Fahrzeug konfigurieren Versand- und geplanten Stoppaufgaben. Weitere Informationen finden Sie unter Aufgabensichtbarkeit anpassen im Aufgaben konfigurieren.

Diese Beispiele zeigen, 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);
}

Versandfortschritt aktualisieren

Du kannst auf Ereignisse warten und den Versandfortschritt als Reise aktualisieren voranschreitet. Verwenden Sie den Standortanbieter zum Abrufen von Metainformationen aus der taskTrackingInfo-Objekt. Änderungen an den Metadaten lösen ein Update-Ereignis aus. Das taskTrackingInfo-Objekt bietet Folgendes:

  • ETA
  • Anzahl der verbleibenden Haltestellen
  • Verbleibende Strecke vor Abholung oder Lieferung

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

Kriterien für mehrere Aufgaben anzeigen

Das Consumer SDK für geplante Aufgaben zeigt nur eine Aufgabe pro Tracking-ID an. auf der Karte. In der Regel weisen Sie jedoch einer bestimmten Warenversand, der während des gesamten Kaufprozesses mit der Ware in Verbindung gebracht wird. in Ihrem System. Das bedeutet, dass eine einzelne Tracking-ID mehrere Aufgaben, wie z. B. eine Abholaufgabe, gefolgt von einer Lieferaufgabe für dasselbe Paket oder mehrere fehlgeschlagene Versandaufgaben für ein Paket.

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

Aufgabenkriterien Ergebnis
Abholaufgaben öffnen
Es gibt genau eine. Aufgabe anzeigen
Mehrere vorhanden Fehler generieren
Geschlossene Abholaufgaben
Genau eins vorhanden Aufgabe anzeigen
Mehrere vorhanden (teilweise mit Ergebniszeit) Aufgabe mit dem letzten Ergebniszeitpunkt anzeigen
Mehrere vorhanden (keine mit Ergebniszeiten) Fehler generieren
Offene Lieferaufgaben
Es gibt genau eine. Aufgabe anzeigen
Mehrere vorhanden Fehler generieren
Aufgaben mit geschlossener Zustellung
Genau eins vorhanden Aufgabe anzeigen
Mehrere vorhanden (teilweise mit Ergebniszeit) Aufgabe mit dem letzten Ergebniszeitpunkt anzeigen
Mehrere vorhanden (keine mit Ergebniszeiten) Fehler generieren

Sendung nicht mehr folgen

Wenn ein Versandvorgang abgeschlossen oder storniert wird, sollte Ihre Kunden-App Teilen der Reise beenden, indem Sie die Tracking-ID und den Standortanbieter aus in der Kartenansicht ändern.

Tracking-ID entfernen

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

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

Fehler bei der Sendungsverfolgung beheben

Fehler, die asynchron durch das Anfordern von Versandinformationen auftreten error-Ereignisse. Im folgenden Beispiel wird gezeigt, wie Sie auf diese Ereignisse warten, um Fehler zu verarbeiten.

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.

Nächste Schritte