In diesem Abschnitt wird gezeigt, wie Sie mit der JavaScript-Flotten-Tracking-Bibliothek ein Fahrzeug für Fahrten auf Abruf oder geplante Aufgaben verfolgen.
So können Sie ein Fahrzeug verfolgen:
- Bibliothek laden und Kartenansicht initialisieren
- Fahrzeugstandort und Kartenansicht angeben
- Auf Ereignisse warten und Fehler behandeln
- Tracking beenden
Bibliothek laden und Kartenansicht initialisieren
Wenn Sie die Flottenvorgänge auf einer Karte auf Ihrer Webseite anzeigen lassen möchten, verwenden Sie ein Script, das eine Karte mit Ihrem API-Schlüssel aufruft. Im folgenden Beispiel sehen Sie, wie das in HTML geht:
URL-Quelle: Ruft die Google Maps API auf, um eine Karte mit Ihrem API-Schlüssel anzufordern.
callback
-Parameter: DieinitMap
-Funktion wird ausgeführt, nachdem die API den Aufruf zurückgegeben hat.libraries
-Parameter: Lädt die Flotten-Tracking-Bibliothek.defer
-Attribut: Damit kann der Browser den Rest der Seite weiter rendern, 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 einen Fahrzeugstandortanbieter instanziieren und eine Kartenansicht mit der Fahrzeug-ID initialisieren, wie in den folgenden Abschnitten beschrieben.
Anbieter von Fahrzeugstandorten instanziieren
Die JavaScript-Bibliothek für die Fahrzeugverfolgung enthält einen Standortanbieter für die Fleet Engine API. Verwenden Sie Ihre Projekt-ID und eine Referenz auf Ihren Token-Abruf, um ihn wie in den folgenden Beispielen zu instanziieren.
Fahrten auf Abruf
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
Initialisieren Sie nach dem Laden der Bibliothek für das Teilen der Reise die Kartenansicht und fügen Sie sie der HTML-Seite hinzu. Ihre Seite sollte ein <div>-Element enthalten, das die Kartenansicht enthält. Das <div>-Element heißt in den folgenden Beispielen map_canvas.
Fahrten auf Abruf
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 behandeln
Sobald Sie mit der Verfolgung eines Fahrzeugs begonnen haben, möchten Sie seinen Fortschritt auf einer Karte aktualisieren und Fehler auf der Route beheben.
Auf Fahrzeug-Ereignisse warten
Wenn Sie den Fortschritt eines Fahrzeugs bei Fahrten auf Abruf oder geplanten Aufgaben verfolgen möchten, müssen Sie auf Änderungsereignisse achten.
Mithilfe des Standortanbieters können Sie Meta vom vehicle
- oder deliveryVehicle
-Objekt abrufen. Die Metainformationen enthalten die voraussichtliche Ankunftszeit und die verbleibende Strecke bis zur nächsten Abholung oder Abgabe des Fahrzeugs. Änderungen an den Metainformationen lösen ein update-Ereignis beim Standortanbieter aus.
Das folgende Beispiel zeigt, wie auf diese Änderungsereignisse gewartet wird.
Fahrten auf Abruf
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
Initialisieren Sie nach dem Laden der Bibliothek für das Teilen der Reise die Kartenansicht und fügen Sie sie der HTML-Seite hinzu. Ihre Seite sollte ein <div>-Element enthalten, das die Kartenansicht enthält. Das Element <div> heißt in den folgenden Beispielen map_canvas.
Fahrten auf Abruf
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);
Tracking eines Fahrzeugs beenden
Wenn Sie das Tracking eines Fahrzeugs beenden möchten, müssen Sie es wie in den folgenden Abschnitten beschrieben aus dem Standortanbieter entfernen und den Standortanbieter aus der Kartenansicht entfernen. Die Beispiele hier gelten sowohl für On-Demand-Fahrten als auch für die Implementierung geplanter Aufgaben.
Fahrzeug vom Standortanbieter entfernen
Wenn der Standortanbieter ein Fahrzeug nicht mehr verfolgen soll, müssen Sie die ID des Lieferfahrzeugs vom Standortanbieter entfernen.
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);