In diesem Abschnitt wird gezeigt, wie Sie die JavaScript-Flotten-Tracking-Bibliothek verwenden um eine Flotte anzusehen. Bei diesen Verfahren wird davon ausgegangen, dass Sie die Flotte eingerichtet haben und eine Karte geladen. Weitere Informationen finden Sie unter Richten Sie die JavaScript-Flotten-Tracking-Bibliothek ein.
In diesem Dokument werden die folgenden Möglichkeiten erläutert, die Ihnen beim Anzeigen eines Flotte:
- Tracking der Flotte starten.
- Auf Ereignisse warten und Fehler beheben
- Tracking beenden:
- Ein einzelnes Fahrzeug verfolgen, während eine Flotte angezeigt wird
Flotte verfolgen
Zum Nachverfolgen einer Flotte müssen Sie einen Flottenstandortanbieter instanziieren und Standortbeschränkungen für den Darstellungsbereich der Karte festlegen, wie im Folgenden beschrieben .
Anbieter von Flottenstandorten instanziieren
Die JavaScript-Flottenverfolgungsbibliothek enthält einen Standortanbieter, der ruft mehrere Fahrzeuge von Fleet Engine ab.
So instanziieren Sie es:
Verwenden Sie Ihre Projekt-ID sowie einen Verweis auf Ihren Token-Abruf.
Eine Fahrzeugfilterabfrage verwenden: Mit der Fahrzeugfilteranfrage wird festgelegt, die 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 Sie,ListDeliveryVehiclesRequest.filter
- Verwenden Sie für On-Demand-Dienste
Legen Sie die Begrenzung für die Fahrzeuganzeige fest.
locationRestriction
für Folgendes verwenden: den Bereich einschränken, in dem Fahrzeuge auf der Karte angezeigt werden sollen. Standort Anbieter ist erst aktiv, wenn dies festgelegt wurde. Sie können Standortgrenzen festlegen: im Konstruktor oder nach dem Konstruktor.Kartenansicht initialisieren
Die folgenden Beispiele zeigen, wie ein Flottenstandortanbieter für
On-Demand- und geplanten Aufgabenszenarien. Diese Beispiele zeigen auch, wie
locationRestriction
im Konstruktor, um den Standortanbieter festzulegen
aktiv ist.
On-Demand-Reisen
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"',
});
Um locationRestriction
nach dem Konstruktor festzulegen, fügen Sie die Methode
locationProvider.locationRestriction
später im Code als
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 mithilfe des Darstellungsbereichs der Karte festlegen
Sie können auch locationRestriction
-Grenzen festlegen, die dem aktuellen Gebiet entsprechen.
die in der Kartenansicht sichtbar sind.
On-Demand-Reisen
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 im selben wenn Sie einem einzelnen Fahrzeug folgen.
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 Sie begonnen haben, der Flotte zu folgen, müssen Sie auf Ereignisänderungen warten und beheben mögliche Fehler wie in den folgenden Abschnitten beschrieben.
Auf Änderungsereignisse warten
Zum Abrufen von Meta-Informationen zur Flotte aus dem Fahrzeugobjekt verwenden Sie Standortanbieter Änderungen an den Metainformationen lösen ein Update aus . Die Metainformationen umfassen Fahrzeugeigenschaften wie die Navigation Status, verbleibende Strecke und benutzerdefinierte Attribute.
Weitere Informationen:
- Informationen zu On-Demand-Fahrten zu Fahrzeugoptionen
- Referenz zu geplanten Aufgaben mit Fahrzeugoptionen
Die folgenden Beispiele zeigen, wie auf diese Änderungsereignisse gewartet wird.
On-Demand-Reisen
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 warten und diese beheben, Fahrzeug. Fehler, die asynchron bei der Anforderung des Fahrzeugs auftreten lösen Fehlerereignisse aus.
Das folgende Beispiel zeigt, wie auf um Fehler zu 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);
});
Flotte nicht mehr verfolgen
Um das Tracking der Flotte zu beenden, setzen Sie die Grenzen des Standortanbieters auf null, und entfernen Sie dann den Standortanbieter aus der Kartenansicht, wie in den folgenden Abschnitten.
Grenzen des Standortanbieters auf null festlegen
Legen Sie Grenzen fest, um zu verhindern, dass der Standortanbieter die Flotte verfolgt des Standortanbieters auf null setzen.
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
Das folgende Beispiel zeigt, wie Sie einen Standortanbieter aus der Kartenansicht entfernen.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
Lieferfahrzeug verfolgen und Lieferflotte ansehen
Wenn Sie Mobilitätsdienste für geplante Aufgaben verwenden, können Sie sowohl eine Fuhrpark und Anzeige der Route und der anstehenden Aufgaben für ein bestimmtes Lieferfahrzeug in derselben Kartenansicht angezeigt. Instanziieren Sie dazu sowohl einen Standort der Lieferflotte Anbieter und Lieferunternehmen und fügen Sie beide der Karte hinzu. Ansicht. Nach der Instanziierung zeigt der Anbieter des Flottenstandorts Lieferfahrzeuge auf der Karte zu sehen. Die folgenden Beispiele zeigen, wie instanziiert wird für beide Standortanbieter:
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
Damit der Standortanbieter des Lieferfahrzeugs ein Lieferfahrzeug verfolgen kann wenn Sie auf die Flottenmarkierung klicken, gehen Sie so vor:
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
Markierung vor dem Standortanbieter des Lieferfahrzeugs ausblenden, um das Rendern zu verhindern zwei Markierungen für dasselbe Fahrzeug:
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);
}
};