In diesem Abschnitt wird gezeigt, wie Sie mit der JavaScript-Flotten-Tracking-Bibliothek ein für On-Demand-Fahrten oder geplante Aufgaben nutzen.
So kannst du ein Fahrzeug verfolgen:
- Bibliothek laden und Kartenansicht initialisieren
- Fahrzeugstandort und Kartenansicht bereitstellen
- Auf Ereignisse warten und Fehler beheben
- Tracking beenden
Bibliothek laden und Kartenansicht initialisieren
Um den Flottenbetrieb auf einer Karte auf Ihrer Webseite anzuzeigen, verwenden Sie ein Skript, das mithilfe Ihres API-Schlüssels eine Karte aufruft. Das folgende Beispiel zeigt, über HTML:
URL-Quelle: Ruft die Google Maps API auf, um mithilfe Ihres API-Schlüssels eine Karte anzufordern.
callback
-Parameter: Führt dieinitMap
-Funktion aus, nachdem die API den Aufruf zurückgegeben hat.libraries
-Parameter: Lädt die Flotten-Tracking-Bibliothek.Attribut
defer
: Damit setzt der Browser das Rendern des restlichen während die API geladen wird.<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
Fahrzeugstandort und Kartenansicht bereitstellen
Um mit dem Tracking eines Fahrzeugs zu beginnen, müssen Sie beide einen Anbieter für den Fahrzeugstandort instanziieren und initialisieren Sie eine Kartenansicht mit der Fahrzeug-ID, wie im Folgenden beschrieben. .
Anbieter von Fahrzeugstandorten instanziieren
Die JavaScript-Flottenverfolgungsbibliothek enthält einen Standortanbieter für die Flotte Engine API Projekt-ID und einen Verweis auf den Tokenabruf verwenden um sie zu instanziieren, wie in den folgenden Beispielen gezeigt.
On-Demand-Reisen
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// vehicleId to immediately start
// tracking.
vehicleId: 'your-vehicle-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// vehicleId to immediately start
// tracking.
vehicleId: 'your-vehicle-id',
});
Geplante Aufgaben
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// deliveryVehicleId to immediately start
// tracking.
deliveryVehicleId: 'your-delivery-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// deliveryVehicleId to immediately start
// tracking.
deliveryVehicleId: 'your-delivery-id',
});
Kartenansicht initialisieren
Nach dem Laden der Bibliothek für das Teilen von Kaufprozessen initialisieren Kartenansicht und fügen sie der HTML-Seite hinzu. Ihre Seite sollte Folgendes enthalten: Ein <div>-Element, das die Kartenansicht enthält Das <div>-Element heißt in den folgenden Beispielen map_canvas.
On-Demand-Reisen
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
= 'your-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.VehicleId
= 'your-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
Geplante Aufgaben
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
Auf Ereignisse warten und Fehler verarbeiten
Sobald du mit der Verfolgung eines Fahrzeugs begonnen hast, möchtest du seine Strecke auf einer Karte aktualisieren Fehler auf der Route des Fahrzeugs zu beheben.
Auf Fahrzeugereignisse warten
Um den Fortschritt eines Fahrzeugs für On-Demand-Fahrten oder geplante Aufgaben zu verfolgen, auf Änderungsereignisse warten müssen.
Sie rufen Meta aus dem vehicle
- oder deliveryVehicle
-Objekt mit der Methode
Standortanbieter. Die Metainformationen enthalten die voraussichtliche Ankunftszeit und die verbleibende Strecke.
vor der nächsten Abholung oder Abgabe. Änderungen an den Metainformationen
Ein update-Ereignis beim Standortanbieter auslösen
Das folgende Beispiel zeigt, wie auf diese Änderungsereignisse gewartet wird.
On-Demand-Reisen
JavaScript
locationProvider.addListener('update', e => {
// e.vehicle contains data that may be
// useful to the rest of the UI.
if (e.vehicle) {
console.log(e.vehicle.vehicleState);
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
// e.vehicle contains data that may be
// useful to the rest of the UI.
if (e.vehicle) {
console.log(e.vehicle.vehicleState);
}
});
Geplante Aufgaben
JavaScript
locationProvider.addListener('update', e => {
// e.deliveryVehicle contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicle) {
console.log(e.deliveryVehicle.remainingDuration);
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
// e.deliveryVehicle contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicle) {
console.log(e.deliveryVehicle.remainingDuration);
}
});
Fehler verarbeiten
Nach dem Laden der Bibliothek für das Teilen von Kaufprozessen initialisieren Kartenansicht und fügen sie der HTML-Seite hinzu. Ihre Seite sollte Folgendes enthalten: Ein <div>-Element, das die Kartenansicht enthält Das <div>-Element heißt in den folgenden Beispielen map_canvas.
On-Demand-Reisen
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
= 'your-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.VehicleId
= 'your-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
Geplante Aufgaben
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
Fahrzeugverfolgung beenden
Wenn Sie die Verfolgung eines Fahrzeugs beenden möchten, müssen Sie es beim Standortanbieter entfernen und Entfernen Sie den Standortanbieter wie nachfolgend beschrieben aus der Kartenansicht. . Die Beispiele hier gelten sowohl für On-Demand-Fahrten als auch für geplante Aufgaben Implementierung.
Fahrzeug vom Standortanbieter entfernen
Um zu verhindern, dass der Standortanbieter ein Fahrzeug ortet, entferne die vom Standortanbieter.
On-Demand-Reisen
JavaScript
locationProvider.vehicleId = '';
TypeScript
locationProvider.vehicleId = '';
Geplante Aufgaben
JavaScript
locationProvider.deliveryVehicleId = '';
TypeScript
locationProvider.deliveryVehicleId = '';
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);