Mit der JavaScript Fleet Tracking Library können Sie die Standorte von Fahrzeugen in ihren Flotten nahezu in Echtzeit visualisieren. Die Bibliothek verwendet die Deliveries API, um die Visualisierung von Lieferfahrzeugen und -aufgaben zu ermöglichen. Wie die JavaScript Shipment Tracking Library enthält auch sie eine JavaScript-Kartenkomponente, die als Drop-in-Ersatz eine standardmäßige google.maps.Map
-Entität und Datenkomponenten zur Verbindung mit Fleet Engine darstellt.
Komponenten
Die JavaScript Fleet Tracking Library enthält Komponenten zur Visualisierung von Lieferfahrzeugen und -haltestellen sowie Rohdaten-Feeds für die voraussichtliche Ankunftszeit oder die verbleibende Entfernung zu einer Lieferung.
Kartenansicht für das Flotten-Tracking
In der Komponente „Kartenansicht für das Flotten-Tracking“ können Sie den Standort von Fahrzeugen und Aufgaben visualisieren. Wenn die Route für ein Fahrzeug bekannt ist, animiert die Komponente für die Kartenansicht das Fahrzeug bei seiner Fahrt auf dem vorhergesagten Weg.
Standortanbieter
Standortanbieter arbeiten mit in Fleet Engine gespeicherten Informationen, um Standortinformationen zu verfolgten Objekten an die Karte für die Fahrtfreigabe zu senden.
Standortanbieter des Lieferfahrzeugs
Der Standortanbieter für Lieferfahrzeuge zeigt die Standortinformationen eines einzelnen Lieferfahrzeugs an. Sie enthält Informationen zum Fahrzeugstandort sowie zu den Aufgaben, die vom Lieferfahrzeug ausgeführt wurden.
Standortanbieter für Lieferflotten
Der Standortanbieter für die Lieferflotte zeigt die Standortinformationen mehrerer Fahrzeuge an. Sie können nach bestimmten Fahrzeugen oder Standorten filtern oder den gesamten Fuhrpark anzeigen.
Sichtbarkeit von beobachteten Orten festlegen
In diesem Abschnitt werden die Sichtbarkeitsregeln für erfasste Standortobjekte auf der Karte für den vordefinierten Standortanbieter von Fleet Engine beschrieben. Anbieter von benutzerdefinierten oder abgeleiteten Standorten können die Sichtbarkeitsregeln ändern.
Lieferfahrzeuge
Ein Lieferfahrzeug ist sichtbar, sobald es in Fleet Engine erstellt wird, und ist unabhängig von den Aufgaben auf seiner gesamten Route sichtbar.
Standortmarkierungen für Aufgaben
Geplante Haltestellen werden auf der Karte als Haltestellenmarkierungen angezeigt. Markierungen für erledigte Aufgaben werden in einem anderen Stil angezeigt als die geplanten Haltestellen des Fahrzeugs.
Die Position der Aufgabenergebnisse wird mit Aufgabenergebnismarkierungen angezeigt. Aufgaben, deren Ergebnis ERFOLGREICH ist, werden mit Markierungen für erfolgreiche Aufgaben angezeigt, während alle anderen Aufgaben mit Markierungen für nicht erfolgreiche Aufgaben angezeigt werden.
Erste Schritte mit der JavaScript-Flotten-Tracking-Bibliothek
Bevor Sie die JavaScript Fleet Tracking Library verwenden, sollten Sie sich mit Fleet Engine und dem Abrufen eines API-Schlüssels vertraut machen. Erstellen Sie dann eine Aufgaben-ID und einen Anspruch auf die Fahrzeug-ID des Lieferfahrzeugs.
Aufgaben-ID und Anspruch auf Lieferfahrzeug-ID erstellen
Wenn du Lieferfahrzeuge mit dem Standortanbieter von Lieferfahrzeugen verfolgen möchtest, musst du ein JSON Web Token (JWT) mit einer Aufgaben-ID und einer Lieferfahrzeug-ID-Anforderung erstellen.
Fügen Sie zum Erstellen der JWT-Nutzlast im Autorisierungsabschnitt eine zusätzliche Anforderung mit den Schlüsseln taskid und deliveryvehicleid hinzu und setzen Sie den Wert jedes Schlüssels auf *. Das Token sollte mit der Cloud IAM-Rolle Fleet Engine Service Super User erstellt werden. Beachten Sie, dass Sie damit umfassenden Zugriff zum Erstellen, Lesen und Ändern von Fleet Engine-Entitäten gewähren und nur vertrauenswürdigen Nutzern Zugriff gewähren sollten.
Das folgende Beispiel zeigt, wie ein Token für das Tracking nach Fahrzeug und Aufgabe erstellt wird:
{
"alg": "RS256",
"typ": "JWT",
"kid": "private_key_id_of_consumer_service_account"
}
.
{
"iss": "superuser@yourgcpproject.iam.gserviceaccount.com",
"sub": "superuser@yourgcpproject.iam.gserviceaccount.com",
"aud": "https://fleetengine.googleapis.com/",
"iat": 1511900000,
"exp": 1511903600,
"scope": "https://www.googleapis.com/auth/xapi",
"authorization": {
"taskid": "*",
"deliveryvehicleid": "*",
}
}
Abruf von Authentifizierungstokens erstellen
Sie können einen Abruf von Authentifizierungstokens erstellen, um mithilfe eines Dienstkontozertifikats für Ihr Projekt ein Token mit den entsprechenden Anforderungen auf Ihren Servern abzurufen. Es ist wichtig, nur Tokens auf Ihren Servern zu erstellen und Ihre Zertifikate nie auf Clients zu teilen. Andernfalls gefährden Sie die Sicherheit Ihres Systems.
Der Fetcher muss eine Datenstruktur mit zwei Feldern zurückgeben, die in ein Promise eingeschlossen sind:
- Einen String
token
. - Eine Zahl
expiresInSeconds
. Ein Token läuft in dieser Zeit nach dem Abruf ab.
Die JavaScript Fleet Tracking Library fordert über den Authentifizierungstoken-Abruf ein Token an, wenn eine der folgenden Bedingungen zutrifft:
- Sie verfügt über kein gültiges Token, z. B. wenn der Fetcher bei einem neuen Seitenaufbau nicht aufgerufen wurde oder der Fetcher nicht mit einem Token zurückgegeben hat.
- Das zuvor abgerufene Token ist abgelaufen.
- Das zuvor abgerufene Token läuft innerhalb einer Minute ab.
Andernfalls verwendet die Bibliothek das zuvor ausgegebene, noch gültige Token und ruft den Fetcher nicht auf.
Das folgende Beispiel zeigt, wie ein Authentifizierungstoken-Abruf erstellt wird:
JavaScript
function authTokenFetcher(options) {
// options is a record containing two keys called
// serviceType and context. The developer should
// generate the correct SERVER_TOKEN_URL and request
// based on the values of these fields.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.Token,
expiresInSeconds: data.ExpiresInSeconds
};
}
TypeScript
function authTokenFetcher(options: {
serviceType: google.maps.journeySharing.FleetEngineServiceType,
context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
// The developer should generate the correct
// SERVER_TOKEN_URL based on options.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.token,
expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
};
}
Beachten Sie beim Implementieren des serverseitigen Endpunkts zum Erstellen der Tokens Folgendes:
- Der Endpunkt muss eine Ablaufzeit für das Token zurückgeben. Im obigen Beispiel wird dies als
data.ExpiresInSeconds
angegeben. - Der Abruf von Authentifizierungstokens muss die Ablaufzeit (in Sekunden ab dem Zeitpunkt des Abrufs) wie im Beispiel gezeigt an die Bibliothek übergeben.
- SERVER_TOKEN_URL hängt von Ihrer Back-End-Implementierung ab. Dies sind die URLs für das Back-End der Beispielanwendung:
- https://
SERVER_URL
/token/delivery_driver/DELIVERY_VEHICLE_ID
- https://
SERVER_URL
/token/delivery_consumer/TRACKING_ID
- https://
SERVER_URL
/token/fleet_reader
- https://
Karte aus HTML laden
Das folgende Beispiel zeigt, wie die Bibliothek für die Freigabe von JavaScript-Recherchen über eine angegebene URL geladen wird. Der Parameter callback führt die Funktion initMap
aus, nachdem die API geladen wurde. Mit dem Attribut defer 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>
Einem Lieferfahrzeug folgen
In diesem Abschnitt wird beschrieben, wie Sie die JavaScript-Flottenverfolgungsbibliothek verwenden, um einem Lieferfahrzeug zu folgen. Laden Sie die Bibliothek aus der im Skript-Tag angegebenen Callback-Funktion, bevor Sie den Code ausführen.
Anbieter eines Standorts für Lieferfahrzeuge instanziieren
In der JavaScript Fleet Tracking Library ist ein Standortanbieter für die Fleet Engine Deliveries API vordefiniert. Verwenden Sie Ihre Projekt-ID und einen Verweis auf Ihre Token-Factory, um sie zu instanziieren.
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 Element <div> heißt im folgenden Beispiel map_canvas.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// 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 wish.
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],
// Styling customizations; see below.
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// 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 wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
Auf Änderungsereignisse warten
Mithilfe des Standortanbieters können Sie Metainformationen zu einer Aufgabe aus dem Objekt deliveryVehicle
abrufen. Die Metainformationen enthalten die voraussichtliche Ankunftszeit und die verbleibende Strecke vor der nächsten Abholung oder dem nächsten Ausstieg des Fahrzeugs. Änderungen an den Metainformationen lösen ein update-Ereignis aus. Das folgende Beispiel zeigt, wie Sie auf diese Änderungsereignisse warten.
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);
}
});
Auf Fehler warten
Fehler, die asynchron durch das Anfordern von Lieferfahrzeuginformationen entstehen, lösen Fehlerereignisse aus. Das folgende Beispiel zeigt, wie auf diese Ereignisse gewartet wird, 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);
});
Nicht mehr beobachten
Wenn der Standortanbieter das Paket nicht mehr verfolgen kann, musst du die ID des Lieferfahrzeugs entfernen.
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);
Lieferflotte ansehen
In diesem Abschnitt wird beschrieben, wie Sie die Bibliothek für die Freigabe von JavaScript-Recherchen verwenden, um eine Bereitstellungsflotte anzusehen. Laden Sie die Bibliothek aus der im Skript-Tag angegebenen Callback-Funktion, bevor Sie den Code ausführen.
Standortanbieter für Lieferflotten instanziieren
In der JavaScript Fleet Tracking Library wird ein Standortanbieter vorab definiert, der mehrere Fahrzeuge aus der FleetEngine Deliveries API abruft. Verwenden Sie Ihre Projekt-ID sowie einen Verweis auf Ihren Token-Abruf, um das Token zu instanziieren.
JavaScript
locationProvider =
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"',
});
TypeScript
locationProvider =
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"',
});
deliveryVehicleFilter
gibt eine Abfrage zum Filtern der auf der Karte angezeigten Fahrzeuge an. Dieser Filter wird direkt an Fleet Engine übergeben. Unterstützte Formate finden Sie unter ListDeliveryVehiclesRequest.filter
.
locationRestriction
schränkt den Bereich ein, in dem Fahrzeuge auf der Karte angezeigt werden sollen.
Die Funktion bestimmt auch, ob die Standortverfolgung aktiviert ist oder nicht. Die Standortermittlung startet erst dann, wenn diese Einstellung aktiviert ist.
Initialisieren Sie die Kartenansicht, sobald der Standortanbieter erstellt wurde.
Standortbeschränkung mithilfe des Darstellungsbereichs der Karte festlegen
Die locationRestriction
-Grenzen können so konfiguriert werden, dass sie dem aktuell in der Kartenansicht sichtbaren Bereich entsprechen.
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;
}
});
Auf Änderungsereignisse warten
Mit dem Standortanbieter können Sie Metainformationen zur Flotte vom deliveryVehicles
-Objekt abrufen. Die Metainformationen enthalten Fahrzeugeigenschaften wie den Navigationsstatus, die verbleibende Entfernung und benutzerdefinierte Attribute. Weitere Informationen finden Sie in der Referenzdokumentation. Eine Änderung an den Metainformationen löst ein update-Ereignis aus. Das folgende Beispiel zeigt, wie Sie auf diese Änderungsereignisse warten.
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
Fehler, die asynchron durch das Anfordern von Flotteninformationen zur Auslieferung auftreten, lösen Fehlerereignisse aus. Beispiele zum Überwachen dieser Ereignisse finden Sie unter Auf Fehler warten.
Nicht mehr beobachten
Wenn Sie verhindern möchten, dass der Standortanbieter die Lieferflotte verfolgt, setzen Sie die Grenzen des Standortanbieters auf null.
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
Während Sie sich eine Flotte ansehen, können Sie die Route und anstehende Aufgaben für ein bestimmtes Lieferfahrzeug aufrufen. Instanziieren Sie dazu sowohl einen Standortanbieter als auch einen Standortanbieter für Lieferfahrzeuge und fügen Sie beide der Kartenansicht hinzu:
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
});
Der Standortanbieter für Lieferflotten beginnt, Lieferfahrzeuge auf der Karte anzuzeigen. Verwenden Sie die Markierungsanpassung, damit der Standortanbieter des Lieferfahrzeugs ein Lieferfahrzeug verfolgen kann, wenn auf seine Flottenmarkierung geklickt wird:
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();
});
}
};
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);
}
};
Design der Basiskarte anpassen
Wenn Sie das Erscheinungsbild der Kartenkomponente anpassen möchten, können Sie mit cloudbasierten Tools Ihre Karte gestalten oder Optionen direkt im Code festlegen.
Cloudbasiertes Gestalten von Karteninhalten verwenden
Mit dem cloudbasierten Gestalten von Karteninhalten können Sie über die Google Cloud Console Kartenstile für alle Apps, in denen Google Maps verwendet wird, erstellen und bearbeiten, ohne dass Änderungen am Code erforderlich sind.
Die Kartenstile werden als Karten-IDs in Ihrem Cloud-Projekt gespeichert. Wenn Sie einen Stil auf Ihre JavaScript-Flotten-Tracking-Karte anwenden möchten, geben Sie beim Erstellen der JourneySharingMapView
einen mapId
an. Das Feld mapId
kann nicht mehr geändert oder hinzugefügt werden, nachdem JourneySharingMapView
instanziiert wurde. Im folgenden Beispiel wird gezeigt, wie Sie einen zuvor erstellten Kartenstil mit einer Karten-ID aktivieren.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
});
Codebasiertes Gestalten von Karteninhalten verwenden
Eine weitere Möglichkeit zum Anpassen des Kartenstils besteht darin, mapOptions
festzulegen, wenn Sie die JourneySharingMapView
erstellen.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
Benutzerdefinierte Markierungen verwenden
Mit der JavaScript-Flotten-Tracking-Bibliothek können Sie das Design von Markierungen anpassen, die der Karte hinzugefügt wurden. Dazu müssen Sie die Markierungsanpassungen festlegen, die dann in der Flotten-Tracking-Bibliothek vor dem Hinzufügen von Markierungen zur Karte und bei jeder Aktualisierung angewendet werden.
Die einfachste Anpassung besteht darin, ein MarkerOptions
-Objekt anzugeben, das auf alle Markierungen desselben Typs angewendet wird. Die im Objekt angegebenen Änderungen werden angewendet, nachdem die einzelnen Markierungen erstellt wurden. Dabei werden alle Standardoptionen überschrieben.
Eine erweiterte Option besteht darin, eine Anpassungsfunktion anzugeben. Mithilfe von Anpassungsfunktionen können Sie Markierungen basierend auf Daten gestalten und den Markierungen interaktive Elemente hinzufügen, z. B. den Umgang mit Klicks. Beim Flotten-Tracking werden Daten zum Objekttyp, den die Markierung repräsentiert: Fahrzeug, Haltestelle oder Aufgabe, an die Anpassungsfunktion übergeben. Dann kann sich der Markierungsstil je nach aktuellem Status des Markierungselements selbst ändern, z. B. der Anzahl der verbleibenden Haltestellen oder der Art der Aufgabe. Sie können sogar Daten aus Quellen außerhalb von Fleet Engine zusammenführen und die Markierung basierend auf diesen Informationen gestalten.
Darüber hinaus können Sie Anpassungsfunktionen verwenden, um die Sichtbarkeit von Markierungen zu filtern.
Rufen Sie dazu setVisible(false)
für die Markierung auf.
Aus Leistungsgründen empfehlen wir jedoch, mit der nativen Filterung im Standortanbieter zu filtern, z. B. FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter
.
Wenn Sie jedoch zusätzliche Filterfunktionen benötigen, können Sie Filter mithilfe der Anpassungsfunktion anwenden.
Die Bibliothek für das Flotten-Tracking bietet die folgenden Anpassungsparameter:
Den Stil von Markierungen mit MarkerOptions
ändern
Im folgenden Beispiel wird gezeigt, wie Sie den Stil einer Fahrzeugmarkierung mit einem MarkerOptions
-Objekt konfigurieren. Folgen Sie diesem Muster, um den Stil einer Markierung mithilfe der oben aufgeführten Parameter anzupassen.
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
Den Stil von Markierungen mithilfe von Anpassungsfunktionen ändern
Das folgende Beispiel zeigt, wie Sie den Stil einer Fahrzeugmarkierung konfigurieren. Folgen Sie diesem Muster, um den Stil einer Markierung mithilfe der oben aufgeführten Parameter anzupassen.
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
Click Handling zu Markierungen
Das folgende Beispiel zeigt, wie Sie einer Fahrzeugmarkierung Click Handling hinzufügen. Folgen Sie diesem Muster, um mithilfe der oben aufgeführten Parameter zur Anpassung von Markierungen einer Markierung Klickbehandlung hinzuzufügen.
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
Sichtbare Markierungen filtern
Das folgende Beispiel zeigt, wie Sie filtern können, welche Fahrzeugmarkierungen sichtbar sind. Folgen Sie diesem Muster, um Markierungen mit einem der oben aufgeführten Parameter zur Anpassung von Markierungen zu filtern.
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};
Polylinienanpassungen verwenden, wenn Sie einem Lieferfahrzeug folgen
Mit der JavaScript Fleet Tracking Library können Sie auch das Erscheinungsbild der Route des Fahrzeugs, dem Sie folgen, auf der Karte anpassen. Die Bibliothek erstellt für jedes Koordinatenpaar im aktiven oder verbleibenden Pfad des Fahrzeugs ein google.maps.Polyline
-Objekt.
Sie können die Polyline
-Objekte gestalten, indem Sie Polylinienanpassungen angeben. Diese Anpassungen werden dann in zwei Situationen angewendet: bevor die Objekte zur Karte hinzugefügt werden und wenn sich die für die Objekte verwendeten Daten geändert haben.
Ähnlich wie bei der Anpassung von Markierungen können Sie eine Gruppe von PolylineOptions
angeben, die auf alle übereinstimmenden Polyline
-Objekte angewendet wird, wenn sie erstellt oder aktualisiert werden.
Ebenso können Sie eine Anpassungsfunktion angeben. Anpassungsfunktionen ermöglichen eine individuelle Gestaltung der Objekte auf der Grundlage von Daten, die von Fleet Engine gesendet werden.
Die Funktion kann den Stil jedes Objekts basierend auf dem aktuellen Fahrzeugstatus ändern. Beispielsweise kann das Polyline
-Objekt eine dunklere Schattierung erhalten oder es dicker werden, wenn das Fahrzeug langsamer fährt. Sie können sogar einen Join aus Quellen außerhalb von Fleet Engine durchführen und das Polyline
-Objekt basierend auf diesen Informationen gestalten.
Sie können die Anpassungen mithilfe der in FleetEngineDeliveryVehicleLocationProviderOptions
bereitgestellten Parameter angeben.
Sie können Anpassungen für verschiedene Pfadzustände auf der Fahrt des Fahrzeugs festlegen – bereits zurückgelegt, aktiv unterwegs oder noch nicht zurückgelegt. Die Parameter sind:
takenPolylineCustomization
für einen bereits zurückgelegten Pfad;activePolylineCustomization
für eine sich aktiv bewegende Route;remainingPolylineCustomization
, für einen noch nicht zurückgelegten Weg.
Stil von Polyline
-Objekten mit PolylineOptions
ändern
Das folgende Beispiel zeigt, wie Sie den Stil für ein Polyline
-Objekt mit PolylineOptions
konfigurieren.
Folgen Sie diesem Muster, um den Stil eines Polyline
-Objekts mit einer der zuvor aufgeführten Polylinienanpassungen anzupassen.
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
Den Stil von Polyline
-Objekten mithilfe von Anpassungsfunktionen ändern
Das folgende Beispiel zeigt, wie Sie den Stil für ein aktives Polylinienobjekt mithilfe einer Anpassungsfunktion konfigurieren. Folgen Sie diesem Muster, um die Gestaltung eines beliebigen Polyline
-Objekts mithilfe der oben aufgeführten Parameter zur Anpassung der Polylinie anzupassen.
JavaScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.deliveryVehicle.remainingDistanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
const distance = params.deliveryVehicle.remainingDistanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
Sichtbarkeit von Polyline
-Objekten steuern
Standardmäßig sind alle Polyline
-Objekte sichtbar. Um ein Polyline
-Objekt unsichtbar zu machen, legen Sie dessen Attribut visible
fest:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
InfoWindow
für eine Fahrzeug- oder Standortmarkierung anzeigen
Mit einem InfoWindow
lassen sich zusätzliche Informationen zu einem Fahrzeug oder einer Standortmarkierung anzeigen.
Im folgenden Beispiel wird gezeigt, wie Sie eine InfoWindow
erstellen und an eine Fahrzeugmarkierung anhängen.
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
if (e.deliveryVehicle) {
const distance =
e.deliveryVehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next task.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
}
});
// 3. Close the info window.
infoWindow.close();
TypeScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
if (e.deliveryVehicle) {
const distance =
e.deliveryVehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next task.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
}
});
// 3. Close the info window.
infoWindow.close();
Automatische Anpassung deaktivieren
Sie können verhindern, dass der Darstellungsbereich der Karte automatisch an das Fahrzeug und die erwartete Route angepasst wird, indem Sie die automatische Anpassung deaktivieren. Das folgende Beispiel zeigt, wie Sie die automatische Anpassung deaktivieren, wenn Sie die Kartenansicht mit dem Teilen der Reise konfigurieren.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
Vorhandene Karte ersetzen
Sie können eine vorhandene Karte mit Markierungen oder anderen Anpassungen ersetzen, ohne diese Anpassungen zu verlieren.
Angenommen, Sie haben eine Webseite mit einer Standardentität google.maps.Map
, auf der eine Markierung angezeigt wird:
<!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 Uluru
var uluru = {lat: -25.344, lng: 131.036};
// 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 Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
}
</script>
<!-- Load the API from the specified URL.
* The async attribute allows the browser to render the page while the API loads.
* The key parameter will contain your own API key (which is not needed for this tutorial).
* 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>
So fügen Sie die JavaScript-Bibliothek für das Teilen von Kaufprozessen hinzu, die Flotten-Tracking enthält:
- Fügen Sie Code für die Authentifizierungstoken-Factory hinzu.
- Initialisieren Sie einen Standortanbieter in der Funktion
initMap()
. - Initialisieren Sie die Kartenansicht in der
initMap()
-Funktion. Die Ansicht enthält die Karte. - Verschieben Sie Ihre Anpassungen in die Callback-Funktion für die Initialisierung der Kartenansicht.
- Fügen Sie dem API-Ladeprogramm die Standortbibliothek hinzu.
Das folgende Beispiel zeigt die erforderlichen Änderungen:
<!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>
let locationProvider;
// (1) Authentication Token Fetcher
function authTokenFetcher(options) {
// options is a record containing two keys called
// serviceType and context. The developer should
// generate the correct SERVER_TOKEN_URL and request
// based on the values of these fields.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.Token,
expiresInSeconds: data.ExpiresInSeconds
};
}
// Initialize and add the map
function initMap() {
// (2) Initialize location provider. Use FleetEngineDeliveryVehicleLocationProvider
// as appropriate.
locationProvider = new google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProvider({
YOUR_PROVIDER_ID,
authTokenFetcher,
});
// (3) Initialize map view (which contains the map).
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map'),
locationProviders: [locationProvider],
// any styling options
});
mapView.addListener('ready', () => {
locationProvider.deliveryVehicleId = DELIVERY_VEHICLE_ID;
// (4) Add customizations like before.
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
// The map, initially centered at Mountain View, CA.
var map = mapView.map;
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, now positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
};
}
</script>
<!-- Load the API from the specified URL
* The async attribute allows the browser to render the page while the API loads
* The key parameter will contain your own API key (which is not needed for this tutorial)
* The callback parameter executes the initMap() function
*
* (5) Add the journey sharing library to the API loader, which includes Fleet Tracking functionality.
-->
<script defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
</script>
</body>
</html>
Wenn Sie ein Lieferfahrzeug mit der angegebenen ID in der Nähe von Uluru betreiben, wird es jetzt auf der Karte gerendert.