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 FunktioninitMap
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:
Ihre Seite muss das Element <div> enthalten, das die Kartenansicht enthält. Im folgenden Beispiel heißt das Element <div>
map_canvas
.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.