In diesem Abschnitt wird gezeigt, wie Sie die JavaScript-Flotten-Tracking-Bibliothek zum Aufrufen einer Flotte verwenden. Bei diesen Verfahren wird davon ausgegangen, dass Sie die Bibliothek für die Fahrzeugverfolgung eingerichtet und eine Karte geladen haben. Weitere Informationen finden Sie unter JavaScript-Bibliothek für die Fahrzeugverfolgung einrichten.
In diesem Dokument werden die folgenden Funktionen beschrieben, die Sie in der Ansicht einer Flotte nutzen können:
- Tracking der Flotte starten.
- Auf Ereignisse warten und Fehler behandeln
- Tracking beenden:
- Ein einzelnes Fahrzeug verfolgen, während eine Flotte angezeigt wird
Flotte verfolgen
Wenn Sie eine Flotte verfolgen möchten, müssen Sie einen Standortanbieter für die Flotte instanziieren und wie in den folgenden Abschnitten beschrieben Standorteinschränkungen für den Karten-Viewport festlegen.
Anbieter von Flottenstandorten instanziieren
Die JavaScript-Bibliothek für die Fahrzeugverfolgung enthält einen Standortanbieter, der mehrere Fahrzeuge aus der Fleet Engine abruft.
So erstellen Sie eine Instanz:
Verwende deine Projekt-ID und eine Referenz auf deinen Token-Abruf.
Fahrzeugfilterabfrage verwenden: Mit der Fahrzeugfilteranfrage wird gesteuert, welche Fahrzeuge auf der Karte angezeigt werden. Der Filter wird an Fleet Engine übergeben.
- Verwenden Sie für On-Demand-Dienste
vehicleFilter
und lesen SieListVehiclesRequest.filter
. - Verwenden Sie für geplante Aufgaben
deliveryVehicleFilter
und prüfen SieListDeliveryVehiclesRequest.filter
- Verwenden Sie für On-Demand-Dienste
Legen Sie die Begrenzung für die Fahrzeuganzeige fest. Mit
locationRestriction
können Sie den Bereich eingrenzen, in dem Fahrzeuge auf der Karte angezeigt werden sollen. Der Standortanbieter ist erst aktiv, wenn dies festgelegt wurde. Sie können die Standortgrenzen entweder im Konstruktor oder nach dem Konstruktor festlegen.Kartenansicht initialisieren
Die folgenden Beispiele zeigen, wie ein Flottenstandortanbieter sowohl für On-Demand- als auch für geplante Aufgaben instanziiert wird. In diesem Beispiel wird auch gezeigt, wie locationRestriction
im Konstruktor verwendet wird, um den Standortanbieter zu aktivieren.
Fahrten auf Abruf
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which vehicles are retrieved.
vehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which vehicles are retrieved.
vehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
Geplante Aufgaben
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery vehicles are
// retrieved and immediately make the location provider active.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery vehicles are
// retrieved and immediately make the location provider active.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
Wenn Sie locationRestriction
nach dem Konstruktor festlegen möchten, fügen Sie locationProvider.locationRestriction
später in Ihren Code ein, wie im folgenden JavaScript-Beispiel gezeigt.
// You can choose to not set locationRestriction in the constructor.
// In this case, the location provider *DOES NOT START* after this line, because
// no locationRestriction is set.
locationProvider = new google.maps.journeySharing.DeliveryFleetLocationProvider({
... // not setting locationRestriction here
});
// You can then set the locationRestriction *after* the constructor.
// After this line, the location provider is active.
locationProvider.locationRestriction = {
north: 1,
east: 2,
south: 0,
west: 1,
};
Standortbeschränkung über den Darstellungsbereich der Karte festlegen
Sie können auch locationRestriction
-Grenzen festlegen, damit sie dem aktuell in der Kartenansicht sichtbaren Bereich entsprechen.
Fahrten auf Abruf
JavaScript
google.maps.event.addListenerOnce(
mapView.map, 'bounds_changed', () => {
const bounds = mapView.map.getBounds();
if (bounds) {
// If you did not specify a location restriction in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.locationRestriction = bounds;
}
});
TypeScript
google.maps.event.addListenerOnce(
mapView.map, 'bounds_changed', () => {
const bounds = mapView.map.getBounds();
if (bounds) {
// If you did not specify a location restriction in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.locationRestriction = bounds;
}
});
Geplante Aufgaben
JavaScript
google.maps.event.addListenerOnce(
mapView.map, 'bounds_changed', () => {
const bounds = mapView.map.getBounds();
if (bounds) {
// If you did not specify a location restriction in the
// location provider constructor, you may do so here.
// Location provider will start as soon as this is set.
locationProvider.locationRestriction = bounds;
}
});
TypeScript
google.maps.event.addListenerOnce(
mapView.map, 'bounds_changed', () => {
const bounds = mapView.map.getBounds();
if (bounds) {
// If you did not specify a location restriction in the
// location provider constructor, you may do so here.
// Location provider will start as soon as this is set.
locationProvider.locationRestriction = bounds;
}
});
Kartenansicht initialisieren
Nachdem Sie den Standortanbieter erstellt haben, initialisieren Sie die Kartenansicht auf die gleiche Weise wie beim Verfolgen eines einzelnen Fahrzeugs.
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);
Auf Ereignisse warten und Fehler behandeln
Nachdem Sie begonnen haben, der Flotte zu folgen, müssen Sie auf Ereignisänderungen warten und alle auftretenden Fehler wie in den folgenden Abschnitten beschrieben beheben.
Auf Änderungsereignisse warten
Mithilfe des Standortanbieters können Sie Metainformationen zur Flotte aus dem Fahrzeugobjekt abrufen. Änderungen an den Metainformationen lösen ein Update-Ereignis aus. Die Metadaten umfassen Fahrzeugeigenschaften wie den Navigationsstatus, die verbleibende Strecke und benutzerdefinierte Attribute.
Weitere Informationen:
- Referenz zu Fahrzeugoptionen für Fahrten auf Abruf
- Referenz zu geplanten Aufgaben mit Fahrzeugoptionen
Die folgenden Beispiele zeigen, wie Sie auf diese Änderungsereignisse reagieren.
Fahrten auf Abruf
JavaScript
locationProvider.addListener('update', e => {
// e.vehicles contains data that may be
// useful to the rest of the UI.
for (vehicle of e.vehicles) {
console.log(vehicle.navigationStatus);
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineFleetLocationProviderUpdateEvent) => {
// e.vehicles contains data that may be
// useful to the rest of the UI.
if (e.vehicles) {
for (vehicle of e.vehicles) {
console.log(vehicle.navigationStatus);
}
}
});
Geplante Aufgaben
JavaScript
locationProvider.addListener('update', e => {
// e.deliveryVehicles contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicles) {
for (vehicle of e.deliveryVehicles) {
console.log(vehicle.remainingDistanceMeters);
}
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineDeliveryFleetLocationProviderUpdateEvent) => {
// e.deliveryVehicles contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicles) {
for (vehicle of e.deliveryVehicles) {
console.log(vehicle.remainingDistanceMeters);
}
}
});
Auf Fehler warten
Außerdem sollten Sie auf Fehler achten, die auftreten, wenn Sie einem Fahrzeug folgen. Fehler, die asynchron beim Anfordern von Fahrzeuginformationen auftreten, lösen Fehlerereignisse aus.
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);
});
Flotte nicht mehr beobachten
Wenn Sie das Tracking der Flotte beenden möchten, setzen Sie die Grenzen des Standortanbieters auf „null“ und entfernen Sie ihn dann wie in den folgenden Abschnitten beschrieben aus der Kartenansicht.
Grenzen des Standortanbieters auf null festlegen
Wenn Sie verhindern möchten, dass der Standortanbieter die Flotte verfolgt, setzen Sie die Grenzen des Standortanbieters auf null.
On-Demand-Reisen
JavaScript
locationProvider.locationRestriction = null;
TypeScript
locationProvider.locationRestriction = null;
Geplante Aufgaben
JavaScript
locationProvider.locationRestriction = null;
TypeScript
locationProvider.locationRestriction = null;
Standortanbieter aus der Kartenansicht entfernen
Im folgenden Beispiel wird gezeigt, wie ein Standortanbieter aus der Kartenansicht entfernt wird.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
Lieferfahrzeug verfolgen, während eine Lieferflotte angezeigt wird
Wenn Sie Mobilitätsdienste für geplante Aufgaben verwenden, können Sie in derselben Kartenansicht sowohl eine Flotte als auch die Route und anstehende Aufgaben für ein bestimmtes Lieferfahrzeug anzeigen. Erstellen Sie dazu einen Standortanbieter für die Lieferflotte und einen Standortanbieter für Lieferfahrzeuge und fügen Sie beide der Kartenansicht hinzu. Nach der Instanziierung zeigt der Standortanbieter der Lieferflotte die Lieferfahrzeuge auf der Karte an. Die folgenden Beispiele zeigen, wie beide Standortanbieter instanziiert werden:
JavaScript
deliveryFleetLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
deliveryVehicleLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher
});
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [
deliveryFleetLocationProvider,
deliveryVehicleLocationProvider,
],
// Any other options
});
TypeScript
deliveryFleetLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
deliveryVehicleLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher
});
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [
deliveryFleetLocationProvider,
deliveryVehicleLocationProvider,
],
// Any other options
});
Mit benutzerdefinierten Markierungen ein Lieferfahrzeug verfolgen
So aktivieren Sie den Standortanbieter für Lieferfahrzeuge, um ein Lieferfahrzeug zu verfolgen, wenn Sie auf seine Flottenmarkierung klicken:
Passen Sie eine Markierung an und fügen Sie eine Klickaktion hinzu.
Blenden Sie die Markierung aus, um doppelte Markierungen zu vermeiden.
Beispiele für diese Schritte finden Sie in den folgenden Abschnitten.
Markierung anpassen und Klickaktion hinzufügen
JavaScript
// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// params.vehicle.name follows the format
// "providers/{provider}/deliveryVehicles/{vehicleId}".
// Only the vehicleId portion is used for the delivery vehicle
// location provider.
deliveryVehicleLocationProvider.deliveryVehicleId =
params.vehicle.name.split('/').pop();
});
}
};
TypeScript
// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
(params: google.maps.journeySharing.DeliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// params.vehicle.name follows the format
// "providers/{provider}/deliveryVehicles/{vehicleId}".
// Only the vehicleId portion is used for the delivery vehicle
// location provider.
deliveryVehicleLocationProvider.deliveryVehicleId =
params.vehicle.name.split('/').pop();
});
}
};
Markierung ausblenden, um doppelte Markierungen zu vermeiden
Sie können die Markierung vor dem Standortanbieter des Lieferfahrzeugs ausblenden, um zu verhindern, dass zwei Markierungen für dasselbe Fahrzeug gerendert werden:
JavaScript
// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.setVisible(false);
}
};
TypeScript
// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
(params: deliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.setVisible(false);
}
};