Sendung verfolgen

Nachdem Sie nun das JavaScript Consumer SDK für geplante Aufgaben eingerichtet haben, können Sie mit Ihrer Nutzer-App eine Lieferung verfolgen. In diesem Dokument werden die folgenden wichtigen Schritten in diesem Prozess:

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

Karte einrichten

Wenn Sie die Abholung oder Lieferung einer Sendung in Ihrer Web-App verfolgen möchten, müssen Sie eine Karte laden und instanziieren Sie das Consumer SDK, um mit der Sendungsverfolgung zu beginnen. 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 mithilfe der Google Maps JavaScript API laden

Laden Sie zum Erstellen einer neuen Karte die Google Maps JavaScript API in Ihre Webanwendung. Die Im folgenden Beispiel wird gezeigt, wie Sie die Google Maps JavaScript API laden, die Methode SDK und lösen Sie die Initialisierungsprüfung aus.

  • 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.

Beispiel: Du hast eine Webseite mit einer standardmäßigen google.maps.Map. Entität, für die 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 Autorisierungstoken -Abruf, den Sie zuvor definiert haben, um Daten von 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 Reise zeigen

Damit auf der Karte die gemeinsame Fahrt angezeigt wird, müssen Sie die Ansicht an, bei der der Frame für die Karte selbst dem Standort für erfasste Reise, die vom Consumer SDK bereitgestellt wird, nachdem es die Informationen von Fleet Engine

Tipps:

  1. Ihre Seite muss ein &lt;div&gt;-Element mit der Kartenansicht enthalten. Im folgenden Beispiel heißt das &lt;div&gt;-Element 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 dem taskTrackingInfo-Objekt. Änderungen am Meta-Tag Informationen 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. Üblicherweise 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
Genau eins vorhanden 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
Genau eins vorhanden 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.

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. Das folgende Beispiel zeigt, wie auf diese Ereignisse gewartet wird Fehler 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.

Nächste Schritte