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 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.
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:
Ihre Seite muss ein <div>-Element mit der Kartenansicht enthalten. Im folgenden Beispiel heißt das <div>-Element
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 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.