Mit der JavaScript-Flotte können Sie die Standorte von Fahrzeugen nahezu in Echtzeit visualisieren. Die Bibliothek nutzt die Deliveries API, um die Bereitstellung von Fahrzeugen und Aufgaben zu visualisieren. Wie die JavaScript Shipment Tracking Library enthält sie eine JavaScript-Kartenkomponente, die als Drop-in-Ersatz für eine standardmäßige google.maps.Map-Entität und -Datenkomponenten zur Verbindung mit Fleet Engine dient.
Komponenten
Die JavaScript-Flottenverfolgungsbibliothek enthält Komponenten zur Visualisierung von Lieferfahrzeugen und -haltestellen sowie Rohdatenfeeds für die voraussichtliche Ankunftszeit oder die verbleibende Entfernung zu einer Lieferung.
Flottenverfolgungsansicht
Mit der Komponente „Fleet Tracking-Kartenansicht“ lässt sich der Standort von Fahrzeugen und Aufgaben visualisieren. Wenn die Route für ein Fahrzeug bekannt ist, wird diese in der Kartenansicht animiert, wenn sie sich über den vorhergesagten Pfad bewegt.
Standortanbieter
Standortanbieter arbeiten mit Informationen, die in Fleet Engine gespeichert sind, um Standortinformationen für nachverfolgte Objekte an die Karte zum Teilen von Routen zu senden.
Lieferant von Lieferdiensten
Der Standortanbieter des Lieferfahrzeugs zeigt die Standortinformationen eines einzelnen Lieferfahrzeugs an. Sie enthält Informationen zum Fahrzeugstandort und zu den Aufgaben, die vom Lieferfahrzeug ausgeführt wurden.
Anbieter von Lieferdiensten
Der Anbieter des Lieferdienste-Standorts zeigt die Standortinformationen mehrerer Fahrzeuge an. Sie können nach bestimmten Fahrzeugen oder Standorten filtern oder die gesamte Flotte anzeigen lassen.
Sichtbarkeit von beobachteten Standorten steuern
In diesem Abschnitt werden die Sichtbarkeitsregeln für nachverfolgte Standortobjekte auf der Karte für den vordefinierten Standortanbieter für Fleet Engine beschrieben. Benutzerdefinierte oder abgeleitete Standortanbieter können die Sichtbarkeitsregeln ändern.
Lieferfahrzeuge
Ein Lieferfahrzeug ist sichtbar, sobald es in Fleet Engine erstellt wurde, und zwar unabhängig von seiner Aufgabe auf seiner gesamten Route.
Aufgabenpositionsmarkierungen
Geplante Haltestellen werden auf der Karte als Stoppmarkierungen für Fahrzeuge angezeigt. Markierungen für abgeschlossene Aufgaben werden mit einem anderen Stil als die geplanten Haltestellen eines Fahrzeugs angezeigt.
Der Standort der Aufgabenergebnisse wird mit Aufgabenergebnismarkierungen angezeigt. Aufgaben mit dem Ergebnis ERFOLGREICH werden mit erfolgreichen Aufgabenmarkierungen angezeigt, während alle anderen Aufgaben mit fehlgeschlagenen Aufgabenmarkierungen angezeigt werden.
Erste Schritte mit der JavaScript-Flottenverfolgungsbibliothek
Bevor Sie die Tracking-Bibliothek für JavaScript-Flotten verwenden, sollten Sie sich mit Fleet Engine und mit dem Abrufen eines API-Schlüssels vertraut machen. Erstellen Sie dann eine Aufgaben-ID und einen Anspruch für die Lieferfahrzeug-ID.
Aufgaben-ID und Anspruchs-ID für Lieferfahrzeuge erstellen
Erstellen Sie ein JSON Web Token (JWT) mit einer Aufgaben-ID und einem Anspruch für die Lieferfahrzeug-ID, um Zustellfahrzeuge mit dem Lieferanten des Fahrzeuglieferanten zu verfolgen.
Zum Erstellen der JWT-Nutzlast fügen Sie im Autorisierungsbereich 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-Dienst-Superuser erstellt werden. Dies gewährt umfassenden Zugriff zum Erstellen, Lesen und Ändern von Fleet Engine-Entitäten und sollte nur für vertrauenswürdige Nutzer freigegeben werden.
Das folgende Beispiel zeigt, wie Sie ein Token für das Tracking nach Fahrzeug und Aufgabe erstellen:
{
"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": "*",
}
}
Authentifizierungstoken-Abruf erstellen
Sie können mit einem Dienstkontozertifikat für Ihr Projekt einen Authentifizierungstoken-Abruf erstellen, um auf Ihren Servern ein geprägtes Token abzurufen. Es ist wichtig, dass Sie auf Ihren Servern nur Tokens erstellen und Ihre Zertifikate nicht mit Clients teilen. Andernfalls gefährden Sie die Sicherheit Ihres Systems.
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.ExpiresInSeconds
};
}
Beim Implementieren des serverseitigen Endpunkts zum Erstellen von Tokens ist Folgendes zu beachten:
- Der Endpunkt muss eine Ablaufzeit für das Token zurückgeben. Im Beispiel oben wird er als
data.ExpiresInSecondsangegeben.- Der Authentifizierungstoken-Abruf muss die Ablaufzeit (in Sekunden ab dem Zeitpunkt der Ausstellung) an die Bibliothek übergeben, wie im Beispiel gezeigt.
Karte aus HTML laden
Das folgende Beispiel zeigt, wie die JavaScript-Journey-Sharing-Bibliothek von einer angegebenen 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 rendern, während die API geladen wird.
Der Parameter v=beta muss angegeben werden.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&callback=initMap&libraries=journeySharing" defer></script>
Einem Lieferfahrzeug folgen
In diesem Abschnitt wird gezeigt, wie Sie die Flottenverfolgungsbibliothek von JavaScript verwenden können, um einem Zustellfahrzeug zu folgen. Bevor Sie den Code ausführen, müssen Sie die Bibliothek aus der im Skript-Tag angegebenen Callback-Funktion laden.
Anbieter von Lieferdiensten instanziieren
Die JavaScript-Flotte-Tracking-Bibliothek definiert einen Standortanbieter für die Fleet Engine Deliveries API. Verwenden Sie Ihre Projekt-ID und einen Verweis auf die Tokenfabrik, 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 JavaScript Journey Sharing-Bibliothek die Kartenansicht und fügen Sie sie der HTML-Seite hinzu. Die Seite sollte ein <div>-Element mit der Kartenansicht enthalten. Das Element <div> hat im folgenden Beispiel den Namen map_canvas.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProvider: 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'),
locationProvider: 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);
Änderungsereignisse anhören
Mit dem Standortanbieter können Sie Metainformationen zu einer Aufgabe aus dem deliveryVehicle-Objekt abrufen. Die Metainformationen umfassen die voraussichtliche Ankunftszeit und die verbleibende Entfernung vor dem nächsten Ab- oder Ausstieg des Fahrzeugs. Änderungen an den Metainformationen lösen ein update-Ereignis aus. Das folgende Beispiel zeigt, wie Sie diese Änderungsereignisse überwachen.
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 prüfen
Fehler, die asynchron aus dem Anfordern von Informationen zu Lieferfahrzeugen entstehen, lösen Fehlerereignisse aus. Das folgende Beispiel zeigt, wie Sie auf diese Ereignisse achten, 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);
});
Lieferflotte abrufen
In diesem Abschnitt wird gezeigt, wie Sie mit der JavaScript Journey Sharing-Bibliothek eine Bereitstellungsflotte abrufen. Bevor Sie den Code ausführen, müssen Sie die Bibliothek aus der im Skript-Tag angegebenen Callback-Funktion laden.
Anbieter von Lieferdiensten instanziieren
Die JavaScript-Flottenverfolgungsbibliothek definiert vorab einen Standortanbieter, der mehrere Fahrzeuge von der FleetEngine Deliveries API abruft. Verwenden Sie Ihre Projekt-ID sowie einen Verweis auf Ihren Token-Abruf, um ihn 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 an, mit der Fahrzeuge auf der Karte gefiltert werden. Dieser Filter wird direkt an Fleet Engine übergeben. Weitere Informationen zu unterstützten Formaten finden Sie unter ListDeliveryVehiclesRequest.filter.
locationRestriction schränkt das Gebiet ein, in dem Fahrzeuge auf der Karte angezeigt werden.
Außerdem wird gesteuert, ob die Standortermittlung aktiv ist. Die Standortermittlung wird erst gestartet, wenn dies festgelegt ist.
Sobald der Standortanbieter erstellt ist, initialisieren Sie die Kartenansicht.
Standortbeschränkung über den Darstellungsbereich der Karte festlegen
Die Grenzen von locationRestriction können so konfiguriert werden, dass sie mit dem Bereich übereinstimmen, der derzeit in der Kartenansicht sichtbar ist.
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;
}
});
Änderungsereignisse anhören
Mit dem Standortanbieter können Sie Metainformationen zur Flotte aus dem deliveryVehicles-Objekt abrufen. Die Metainformationen umfassen Fahrzeugeigenschaften wie den Navigationsstatus, die verbleibende Entfernung und benutzerdefinierte Attribute. Weitere Informationen finden Sie in der Referenzdokumentation. Bei Änderung der Metainformationen wird das Ereignis update ausgelöst. Das folgende Beispiel zeigt, wie Sie diese Änderungsereignisse überwachen.
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 prüfen
Fehler, die asynchron aus dem Anfordern von Informationen der Bereitstellungsflotte auftreten, lösen Fehlerereignisse aus. Beispiele zum Überwachen dieser Ereignisse finden Sie unter Auf Fehler prüfen.
Design der Basiskarte anpassen
Wenn Sie das Design der Maps-Komponente anpassen möchten, können Sie die Karte mit cloudbasierten Tools gestalten oder Optionen direkt im Code festlegen.
Cloudbasierte Kartenstile verwenden
Mit cloudbasierten Kartenstilen können Sie Kartenstile für alle Apps erstellen und bearbeiten, bei denen Google Maps über die Google Cloud Console verwendet wird. Der Code muss dabei nicht geändert werden.
Die Kartenstile werden als Karten-IDs in Ihrem Cloud-Projekt gespeichert. Wenn Sie einen Stil auf Ihre JavaScript-Flottentracking-Karte anwenden möchten, geben Sie beim Erstellen von JourneySharingMapView einen mapId an. Das Feld mapId kann nicht geändert oder hinzugefügt werden, nachdem JourneySharingMapView instanziiert wurde. Das folgende Beispiel zeigt, wie Sie einen zuvor erstellten Kartenstil mit einer Karten-ID aktivieren.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProvider: locationProvider,
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProvider: locationProvider,
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
});
Codebasierte Kartenstile verwenden
Eine weitere Möglichkeit zum Anpassen des Kartenstils besteht darin, beim Erstellen von JourneySharingMapView mapOptions festzulegen.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProvider: locationProvider,
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProvider: locationProvider,
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
Stil und Sichtbarkeit von Routen ändern
Mit benutzerdefinierten Stiloptionen können Sie den Stil und die Sichtbarkeit der angenommenen und erwarteten Routen konfigurieren. Weitere Informationen finden Sie unter PolylineOptions-Oberfläche.
Das folgende Beispiel zeigt, wie Sie den Stil und die Sichtbarkeit erwarteter Routen konfigurieren. Verwenden Sie takenRoutePolylineSetup anstelle von anticipatedRoutePolylineSetup, um den Stil und die Sichtbarkeit der zurückgelegten Routen zu konfigurieren.
JavaScript
// This function is specified in the
// JourneySharingMapView constructor's options
// parameter.
function anticipatedRoutePolylineSetup({
defaultPolylineOptions, defaultVisible}) {
// If this function is not specified, the
// PolylineOptions object contained in
// defaultPolylineOptions is used to render the
// anticipated route polyline. visible property sets the
// polyline's visibility. Modify this object and
// pass it back to customize the style of the map.
defaultPolylineOptions.strokeOpacity = 0.5;
defaultPolylineOptions.strokeColor = 'red';
return {
polylineOptions: defaultPolylineOptions,
visible: true
};
}
// As an alternative, set static PolylineOptions to
// use for the anticipated route.
const anticipatedRoutePolylineOptionsSetup = {
polylineOptions: {
strokeOpacity: 0.5,
strokeColor: 'red',
…
},
visible: true,
};
TypeScript
// This function is specified in the
// JourneySharingMapView constructor's options
// parameter.
function anticipatedRoutePolylineSetup(options: {
defaultPolylineOptions: google.maps.PolylineOptions,
visible: boolean,
}): {
polylineOptions: google.maps.PolylineOptions,
visible: boolean,
} {
// If this function is not specified, the
// PolylineOptions object contained in
// defaultPolylineOptions is used to render the
// anticipated route polyline. visible property sets the
// polyline's visibility. Modify this object and
// pass it back to customize the style of the map.
options.defaultPolylineOptions.strokeOpacity = 0.5;
options.defaultPolylineOptions.strokeColor = 'red';
return {
polylineOptions: options.defaultPolylineOptions,
visible: true
};
}
// As an alternative, set static PolylineOptions to
// use for the anticipated route.
const anticipatedRoutePolylineSetup = {
polylineOptions: {
strokeOpacity: 0.5,
strokeColor: 'red',
…
},
visible: true,
};
Markierungsanpassungen verwenden
Mit der JavaScript-Flotten-Tracking-Bibliothek können Sie das Design der Markierungen anpassen, die der Karte hinzugefügt werden. Dazu legen Sie Markierungsanpassungen fest, die dann von der Flotten-Tracking-Bibliothek angewendet werden, bevor sie der Karte Markierungen hinzugefügt werden, und bei jeder Markierungsaktualisierung.
Die einfachste Anpassung besteht darin, ein MarkerOptions-Objekt anzugeben, das auf alle Markierungen desselben Typs angewendet wird. Die im Objekt angegebenen Änderungen werden übernommen, nachdem jede Markierung erstellt wurde. Dabei werden alle Standardoptionen überschrieben.
Eine erweiterte Option besteht darin, eine Anpassungsfunktion anzugeben. Anpassungsfunktionen ermöglichen die Gestaltung von Markierungen auf der Grundlage von Daten sowie das Hinzufügen von Interaktivität zu Markierungen (z. B. Klickbehandlung). Insbesondere werden mit der Flottenverfolgung Daten zur Personalisierungsfunktion für den Objekttyp übergeben, den die Markierung darstellt: Fahrzeug, Haltestelle oder Aufgabe. Dann kann sich der Stil der Markierungen je nach aktuellem Status des Markierungselements selbst ändern, z. B. nach 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.
Außerdem können Sie die Sichtbarkeit von Markierungen mit Anpassungsfunktionen filtern.
Rufen Sie dazu setVisible(false) für die Markierung auf.
Aus Leistungsgründen empfehlen wir jedoch, mit der nativen Filterung des Standortanbieters zu filtern, z. B. FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter.
Wenn Sie jedoch zusätzliche Filterfunktionen benötigen, können Sie diese mithilfe der Anpassungsfunktion anwenden.
Die Bibliothek des Trackings enthält folgende Anpassungsparameter:
Den Stil von Markierungen mit MarkerOptions ändern
Das folgende Beispiel zeigt, wie Sie das Design einer Fahrzeugmarkierung mit einem MarkerOptions-Objekt konfigurieren. Mit diesem Muster können Sie den Stil einer Markierung mithilfe der oben aufgeführten Parameter anpassen.
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
Stile von Markierungen mithilfe von Anpassungsfunktionen ändern
Das folgende Beispiel zeigt, wie Sie das Design einer Fahrzeugmarkierung konfigurieren. Folgen Sie diesem Muster, um den Stil einer Markierung mithilfe der oben aufgeführten Parameter anzupassen.
JavaScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
Klickbehandlung zu Markierungen hinzufügen
Das folgende Beispiel zeigt, wie eine Klickmarkierung zu einer Fahrzeugmarkierung hinzugefügt wird. Folgen Sie diesem Muster, um die Klickbehandlung mit einem der oben aufgeführten Parameter zur Markierungsanpassung einer beliebigen Markierung hinzuzufügen.
JavaScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
Sichtbare Markierungen filtern
Das folgende Beispiel zeigt, wie gefiltert wird, welche Fahrzeugmarkierungen sichtbar sind. Folgen Sie diesem Muster, um alle Markierungen mithilfe eines der oben aufgeführten Parameter zur Markierungsanpassung zu filtern.
JavaScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
Eine InfoWindow für eine Fahrzeug- oder Standortmarkierung anzeigen
Mit InfoWindow kannst du zusätzliche Informationen zu einer Fahrzeug- oder Standortmarkierung einblenden.
Das folgende Beispiel zeigt, wie ein InfoWindow erstellt und an eine Fahrzeugmarkierung angehängt wird.
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 die Karte automatisch den Darstellungsbereich an das Fahrzeug und die erwartete Route anpasst, indem Sie die automatische Anpassung deaktivieren. Im folgenden Beispiel sehen Sie, wie Sie die automatische Anpassung deaktivieren, wenn Sie die Kartenansicht zum Teilen der Route konfigurieren.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProvider: locationProvider,
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProvider: 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 der 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 Journey Sharing-Bibliothek hinzu, die die Flottenverfolgung 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 Funktion
initMap(). Die Ansicht enthält die Karte. - Verschieben Sie die Anpassung in die Callback-Funktion für die Initialisierung der Kartenansicht.
- Fügen Sie die Standortbibliothek zum API-Loader 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'),
locationProvider: 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.