Mit der JavaScript-Flottenverfolgungsbibliothek können Sie die Standorte der Fahrzeuge Ihrer Flotten nahezu in Echtzeit visualisieren. Die Bibliothek verwendet die On-Demand-Rides and Deliveries API, um die Visualisierung von Fahrzeugen und Fahrten zu ermöglichen. Die Tracking-Bibliothek für die JavaScript-Flotte enthält eine JavaScript-Kartenkomponente, die als Drop-in-Ersatz für eine standardmäßige google.maps.Map
-Entität und -Datenkomponenten zum Herstellen einer Verbindung mit Fleet Engine dient.
Komponenten
Die JavaScript-Flottenverfolgungsbibliothek enthält Komponenten zur Visualisierung von Fahrzeugen und Fahrtpunkten sowie Rohdatenfeeds für die voraussichtliche Ankunftszeit oder die verbleibende Entfernung zu einer Fahrt.
Kartenansicht für Flottenverfolgung
Die Komponente „Flotten-Tracking-Kartenansicht“ visualisiert den Standort von Fahrzeugen und die Wegpunkte. Wenn die Route für ein Fahrzeug bekannt ist, animiert die Kartenansichtskomponente dieses Fahrzeug, während es sich entlang des vorhergesagten Pfades bewegt.
Standortanbieter
Standortanbieter verwenden in Fleet Engine gespeicherte Informationen, um Standortinformationen für verfolgte Objekte an die Journey-Karte zu senden.
Anbieter von Fahrzeugstandorten
Der Anbieter von Fahrzeugstandorten zeigt die Standortinformationen eines einzelnen Fahrzeugs an. Es enthält Informationen zum Standort des Fahrzeugs und zur aktuellen Fahrt, die dem Fahrzeug zugewiesen ist.
Anbieter von Flottenstandorten
Der Anbieter des Flottenstandorts zeigt Standortinformationen für mehrere Fahrzeuge an. Sie können nach einem bestimmten Fahrzeug und dessen Standort filtern oder die Standorte der Fahrzeuge für den gesamten Fuhrpark anzeigen lassen.
Sichtbarkeit von beobachteten Orten steuern
Sichtbarkeitsregeln bestimmen, wann ein beobachtetes Standortobjekt auf der Karte für einen Fleet Engine-Standortanbieter sichtbar ist. Hinweis: Wenn Sie einen benutzerdefinierten oder abgeleiteten Standortanbieter verwenden, können die Sichtbarkeitsregeln geändert werden.
Fahrzeuge
Ein Fahrzeug ist sichtbar, sobald es in Fleet Engine erstellt wurde, und sichtbar, wenn „vehicle_state“ gleich Online
ist. Das bedeutet, dass ein Fahrzeug auch dann sichtbar sein kann, wenn ihm keine aktuelle Fahrt zugewiesen ist.
Wegpunktmarkierungen
Eine Wegpunktmarkierung kennzeichnet Punkte auf der Fahrt eines Fahrzeugs, beginnend am Startpunkt und am Zielort. Die Wegpunktmarkierungen können so definiert werden:
- Startort: gibt den Startort für die Fahrt an
- Mittel: zeigt Zwischenstopps für die Fahrt an
- Ziel: Gibt den endgültigen Standort für die Fahrt an
Wegpunkte für geplante Fahrzeuge werden auf der Karte als Start-, Zwischen- und Zielmarkierungen angezeigt.
Erste Schritte mit der Tracking-Bibliothek für die JavaScript-Flotte
Machen Sie sich vor der Verwendung der JavaScript-Flottenverfolgungsbibliothek mit Fleet Engine und dem Abrufen eines API-Schlüssels vertraut. Erstellen Sie dann eine Fahrt-ID und einen Fahrzeug-ID-Anspruch.
Anspruch auf Fahrt-ID und Fahrzeug-ID erstellen
Wenn Sie Fahrzeuge mit dem Fahrzeugstandortanbieter verfolgen möchten, erstellen Sie ein JSON-Webtoken (JWT) mit einer Fahrt-ID und einer Fahrzeug-ID-Anforderung.
Fügen Sie zum Erstellen der JWT-Nutzlast eine zusätzliche Anforderung im Autorisierungsabschnitt mit den Schlüsseln tripid
und vehicleid
hinzu und setzen Sie value
jedes Schlüssels auf *. Das Token sollte mit der Cloud IAM-Rolle Fleet Engine Service Super User erstellt werden. Beachten Sie, dass dies umfassenden Zugriff zum Erstellen, Lesen und Ändern von Fleet Engine-Entitäten gewährt und nur für vertrauenswürdige Nutzer freigegeben werden sollte.
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": {
"tripid": "*",
"vehicleid": "*",
}
}
Authentifizierungstoken-Abruf erstellen
Die JavaScript Fleet Tracking Library fordert über den Authentifizierungstoken-Abruf ein Token an, wenn eine der folgenden Bedingungen zutrifft:
- Sie hat kein gültiges Token, z. B. wenn der Fetcher bei einem neuen Seitenaufbau nicht aufgerufen wurde oder wenn der Fetcher kein 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 ausgestellte, noch gültige Token und ruft den Fetcher nicht auf.
Sie können einen Authentifizierungstoken-Abruf erstellen, um ein mit den entsprechenden Anforderungen erstelltes Token auf Ihren Servern mithilfe eines Dienstkontozertifikats für Ihr Projekt abzurufen. Es ist wichtig, dass Sie nur Tokens auf Ihren Servern erstellen und Ihre Zertifikate niemals auf Clients teilen. Andernfalls könnten Sie die Sicherheit Ihres Systems gefährden.
Der Abruf muss eine Datenstruktur mit zwei Feldern zurückgeben, die in ein Promise eingeschlossen sind:
- Einen String
token
. - Eine Zahl
expiresInSeconds
. In dieser Zeit läuft ein Token nach dem Abruf ab.
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(),
};
}
Bei der Implementierung des serverseitigen Endpunkts für die Münzprägung von Tokens ist Folgendes zu beachten:
- Der Endpunkt muss eine Ablaufzeit für das Token zurückgeben. Im obigen Beispiel wird sie als
data.ExpiresInSeconds
angegeben. - Der Authentifizierungstoken-Abruf muss die Ablaufzeit (in Sekunden ab dem Zeitpunkt des Abrufs) an die Bibliothek übergeben, wie im Beispiel gezeigt.
- Die SERVER_TOKEN_URL hängt von Ihrer Back-End-Implementierung ab. Dies sind Beispiel-URLs:
- https://
SERVER_URL
/token/driver/VEHICLE_ID
- https://
SERVER_URL
/token/consumer/TRIP_ID
- https://
SERVER_URL
/token/fleet_reader
- https://
Karte aus HTML laden
Das folgende Beispiel zeigt, wie die JavaScript Journey Sharing-Bibliothek über eine angegebene URL geladen wird. Der callback-Parameter führt die initMap
-Funktion aus, nachdem die API geladen wurde. Mit dem Attribut defer kann der Browser den Rest Ihrer 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&v=beta" defer></script>
Einem Fahrzeug folgen
In diesem Abschnitt wird gezeigt, wie Sie die JavaScript-Flottenverfolgungsbibliothek verwenden, um einem Fahrzeug zu folgen. Laden Sie die Bibliothek über die im Skript-Tag angegebene Callback-Funktion, bevor Sie den Code ausführen.
Anbieter von Fahrzeugstandorten instanziieren
In der JavaScript Fleet Tracking Library ist ein Standortanbieter für die On-Demand Rides and 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
.FleetEngineVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// vehicleId to immediately start
// tracking.
vehicleId: 'your-vehicle-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// vehicleId to immediately start
// tracking.
vehicleId: 'your-vehicle-id',
});
Kartenansicht initialisieren
Initialisieren Sie die Kartenansicht und fügen Sie sie der HTML-Seite hinzu, nachdem Sie die JavaScript Journey Sharing-Bibliothek geladen haben. Die Seite muss ein <div>-Element enthalten, das die Kartenansicht enthält. Im Beispiel unten heißt das <div>-Element 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 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 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.
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// 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 wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
Änderungsereignisse beobachten
Du kannst Metainformationen zu einem Fahrzeug mithilfe des Standortanbieters aus dem vehicle
-Objekt abrufen. Die Metainformationen umfassen die voraussichtliche Ankunftszeit und die verbleibende Entfernung vor dem nächsten Ein- oder 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.vehicle contains data that may be
// useful to the rest of the UI.
if (e.vehicle) {
console.log(e.vehicle.vehicleState);
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
// e.vehicle contains data that may be useful to the rest of the UI.
if (e.vehicle) {
console.log(e.vehicle.vehicleState);
}
});
Auf Fehler warten
Fehler, die asynchron beim Anfordern von Fahrzeuginformationen auftreten, lösen Fehlerereignisse aus. Das folgende Beispiel zeigt, wie diese Ereignisse überwacht werden, 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 Fahrzeug nicht mehr tracken soll, entfernen Sie die Fahrzeug-ID.
JavaScript
locationProvider.vehicleId = '';
TypeScript
locationProvider.vehicleId = '';
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);
Fahrzeugflotte ansehen
In diesem Abschnitt wird beschrieben, wie Sie die JavaScript-Bibliothek zum Teilen von Fahrten verwenden, um einen Fuhrpark aufzurufen. Laden Sie die Bibliothek über die im Skript-Tag angegebene Callback-Funktion, bevor Sie den Code ausführen.
Standortanbieter für Fahrzeugflotten instanziieren
In der JavaScript Fleet Tracking Library ist ein Standortanbieter vorab definiert, der mehrere Fahrzeuge aus der On-Demand Rides and 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
.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"',
});
vehicleFilter
gibt eine Abfrage zum Filtern von Fahrzeugen auf der Karte an.
Dieser Filter wird direkt an Fleet Engine übergeben. Unterstützte Formate finden Sie unter ListVehiclesRequest.
locationRestriction
schränkt den Bereich ein, in dem Fahrzeuge auf der Karte angezeigt werden.
Außerdem wird festgelegt, ob die Standortermittlung aktiviert ist oder nicht. Die Standortverfolgung beginnt erst, wenn diese Einstellung aktiviert ist.
Nachdem der Standortanbieter erstellt wurde, initialisieren Sie die Kartenansicht.
Standortbeschränkung mithilfe des Darstellungsbereichs der Karte festlegen
Die Grenzen von locationRestriction
können so konfiguriert werden, dass sie dem 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;
}
});
Änderungsereignisse beobachten
Metainformationen zur Flotte können Sie mit dem Standortanbieter aus dem vehicles
-Objekt abrufen. Die Metainformationen umfassen Fahrzeugeigenschaften wie den Navigationsstatus, die Entfernung zum nächsten Wegpunkt und benutzerdefinierte Attribute. Weitere Informationen findest du in der Referenzdokumentation. Eine Änderung an den Meta-Informationen löst ein Update-Ereignis aus. Das folgende Beispiel zeigt, wie Sie auf diese Änderungsereignisse warten.
JavaScript
locationProvider.addListener('update', e => {
// 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);
}
}
});
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);
}
}
});
Auf Fehler warten
Fehler, die asynchron beim Anfordern von Informationen zum Flottenmanagement auftreten, lösen Fehlerereignisse aus. Beispiele dafür, wie auf diese Ereignisse gewartet wird, finden Sie unter Auf Fehler warten.
Nicht mehr beobachten
Wenn der Standortanbieter die Flotte nicht verfolgen soll, 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);
Design der Basiskarte anpassen
Sie können das Erscheinungsbild der Kartenkomponente anpassen, indem Sie mit cloudbasierten Tools die Karte gestalten oder Optionen direkt im Code festlegen.
Cloudbasiertes Gestalten von Karteninhalten
Mit dem cloudbasierten Kartenstil können Sie über die Google Cloud Console Kartenstile für alle Apps erstellen und bearbeiten, in denen Google Maps verwendet wird, ohne dass Änderungen am Code erforderlich sind. Die Kartenstile werden als Karten-IDs im Cloud-Projekt gespeichert. Wenn Sie einen Stil auf die Tracking-Karte der JavaScript-Flotte 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'
}
});
Codebasierte Kartenstile verwenden
Eine weitere Möglichkeit, den Kartenstil anzupassen, besteht darin, mapOptions
beim Erstellen des JourneySharingMapView
festzulegen.
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" }
]
}
]
}
});
Anpassungen von Markierungen verwenden
Mit der JavaScript-Flottenverfolgungsbibliothek können Sie das Design von Markierungen anpassen, die der Karte hinzugefügt werden. Dazu legen Sie Anpassungen für Markierungen fest. Diese werden dann von der Fleet Tracking Library angewendet, bevor sie der Karte hinzugefügt und bei jeder Aktualisierung einer Markierung hinzugefügt werden.
Sie können eine einfache Anpassung erstellen, indem Sie ein MarkerOptions
-Objekt angeben, das auf alle Markierungen desselben Typs angewendet werden soll. Die im Objekt angegebenen Änderungen werden angewendet, nachdem die jeweilige Markierung erstellt wurde. Dabei werden alle Standardoptionen überschrieben.
Als erweiterte Option können Sie eine Anpassungsfunktion angeben. Mit Anpassungsfunktionen können Sie Markierungen auf der Grundlage von Daten gestalten und Interaktivität hinzufügen, z. B. die Klickverarbeitung. Dabei übergibt das Flotten-Tracking Daten über den Objekttyp, den die Markierung darstellt, an die Anpassungsfunktion: Fahrzeug, Haltestelle oder Aufgabe. Dadurch kann sich der Stil der Markierung basierend auf dem aktuellen Status des Markierungselements ändern, etwa die Anzahl der verbleibenden Haltestellen oder die 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 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 die native Filterung des Standortanbieters, z. B. FleetEngineFleetLocationProvider.vehicleFilter
.
Wenn Sie jedoch zusätzliche Filterfunktionen benötigen, können Sie diese mithilfe der Anpassungsfunktion filtern.
Die Bibliothek für das Flotten-Tracking bietet die folgenden Anpassungsparameter:
Stil von Markierungen mit MarkerOptions
ändern
Das folgende Beispiel zeigt, wie Sie den Stil einer Fahrzeugmarkierung mit einem MarkerOptions
-Objekt konfigurieren. Folgen Sie diesem Muster, um den Stil jeder Markierung mithilfe der oben aufgeführten Anpassungsparameter anzupassen.
JavaScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
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 zur Anpassung der Markierung anzupassen.
JavaScript
vehicleMarkerCustomization =
(params) => {
var remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
Markierungen für Klick-Handhabung hinzufügen
Im folgenden Beispiel sehen Sie, wie einer Fahrzeugmarkierung die Klickbehandlung hinzugefügt wird. Folgen Sie diesem Muster, um jeder Markierung mithilfe eines der oben aufgeführten Anpassungsparameter die Klickverarbeitung hinzuzufügen.
JavaScript
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
Sichtbare Markierungen filtern
Das folgende Beispiel zeigt, wie Sie filtern, welche Fahrzeugmarkierungen sichtbar sind. Folgen Sie diesem Muster, um Markierungen mithilfe der oben aufgeführten Parameter zur Anpassung von Markierungen zu filtern.
JavaScript
vehicleMarkerCustomization =
(params) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
Polylinienanpassungen verwenden, wenn du einem Fahrzeug folgst
Mit der Flottenverfolgungsbibliothek können Sie auch das Design der Route des Fahrzeugs, dem Sie folgen, auf der Karte anpassen. Die Bibliothek erstellt ein google.maps.Polyline-Objekt für jedes Koordinatenpaar im aktiven oder verbleibenden Pfad des Fahrzeugs.
Sie können die Polyline
-Objekte gestalten, indem Sie Polylinienanpassungen angeben. Die Bibliothek wendet diese Anpassungen dann in zwei Situationen an: vor dem Hinzufügen der Objekte zur Karte und wenn sich die für die Objekte verwendeten Daten geändert haben.
Ähnlich wie bei der Anpassung von Markierungen können Sie einen Satz von PolylineOptions
angeben, der auf alle übereinstimmenden Polyline
-Objekte angewendet wird, wenn diese erstellt oder aktualisiert werden.
Ebenso können Sie eine Anpassungsfunktion angeben. Anpassungsfunktionen ermöglichen eine individuelle Gestaltung der Objekte basierend auf den von Fleet Engine gesendeten Daten.
Die Funktion kann den Stil der einzelnen Objekte basierend auf dem aktuellen Zustand des Fahrzeugs ändern. So kann das Polyline
-Objekt einen tieferen Farbton eingefärbt oder es dicker gemacht werden, wenn das Fahrzeug langsamer ist. Sie können sogar eine Zusammenführung mit Quellen außerhalb von Fleet Engine durchführen und das Polyline
-Objekt anhand dieser Informationen gestalten.
Sie können die Anpassungen mithilfe von Parametern in FleetEngineVehicleLocationProviderOptions
angeben.
Sie können Anpassungen für verschiedene Pfadzustände der Fahrt des Fahrzeugs vornehmen – also bereits zurückgelegt, aktiv oder noch nicht zurückgelegt. Die Parameter sind:
takenPolylineCustomization
für einen bereits zurückgelegten PfadactivePolylineCustomization
für einen aktiv bewegenden PfadremainingPolylineCustomization
für einen noch nicht zurückgelegten Pfad.
Stil von Polyline
-Objekten mit PolylineOptions
ändern
Das folgende Beispiel zeigt, wie der Stil für ein Polyline
-Objekt mit PolylineOptions
konfiguriert wird.
Folgen Sie diesem Muster, um den Stil eines Polyline
-Objekts mithilfe der zuvor aufgeführten Anpassungen für Polylinien anzupassen.
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
Stil von Polyline
-Objekten mithilfe von Anpassungsfunktionen ändern
Das folgende Beispiel zeigt, wie Sie die Gestaltung eines aktiven Polyline
-Objekts konfigurieren. Folgen Sie diesem Muster, um den Stil eines Polyline
-Objekts mithilfe der zuvor aufgeführten Parameter zur Anpassung von Polylinien anzupassen.
JavaScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.vehicle.waypoints[0].distanceMeters;
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: VehiclePolylineCustomizationFunctionParams) => {
const distance = params.vehicle.waypoints[0].distanceMeters;
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. Wenn Sie ein Polyline
-Objekt unsichtbar machen möchten, legen Sie dessen Attribut visible
fest:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
Verkehrsabhängige Polyline
-Objekte rendern
Fleet Engine gibt Daten zur Verkehrsgeschwindigkeit für die aktiven und verbleibenden Pfade des Fahrzeugs zurück. Anhand dieser Informationen können Sie die Polyline
-Objekte entsprechend ihrer Traffic-Geschwindigkeit formatieren:
JavaScript
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params) => {
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params: VehiclePolylineCustomizationFunctionParams) => {
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
InfoWindow
für ein Fahrzeug oder eine Standortmarkierung anzeigen
Sie können einen InfoWindow
verwenden, um zusätzliche Informationen zu einem Fahrzeug oder einer Standortmarkierung anzuzeigen.
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 vehicle location provider.)
locationProvider.addListener('update', e => {
if (e.vehicle) {
const distance =
e.vehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next drop-off point.`);
// 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 vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
if (e.vehicle) {
const distance =
e.vehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next drop-off.`);
// 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 konfigurieren, an der eine Fahrt geteilt wird.
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 dass diese Anpassungen verloren gehen.
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 Oracle Park Stadium
var oraclePark = { lat: 37.780087547237365, lng: -122.38948437884427 };,
// 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 Oracle Park
var marker = new google.maps.Marker({ position: oraclePark, 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 die Freigabe von Fahrten 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 Funktion
initMap()
. Die Ansicht enthält die Karte. - Verschieben Sie Ihre Anpassung in die Callback-Funktion zur 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 FleetEngineVehicleLocationProvider
// as appropriate.
locationProvider = new google.maps.journeySharing.FleetEngineVehicleLocationProvider({
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.vehicleId = VEHICLE_ID;
// (4) Add customizations like before.
// The location of Oracle Park
var oraclePark = {lat: 37.77995187146094, lng: -122.38957020952795};
// 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 Oracle Park
var marker = new google.maps.Marker({position: oraclePark, 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&v=beta"
></script>
</body>
</html>
Wenn Sie ein Fahrzeug mit der angegebenen ID in der Nähe von Oracle Park betreiben, wird es auf der Karte gerendert.