Mit der JavaScript Fleet Tracking Library können Sie die Positionen
Fahrzeuge in Ihren Flotten nahezu in Echtzeit. Die Bibliothek nutzt die Funktion On Demand
Rides and Deliveries (Fahrgeschäfte und Lieferungen)
API
die Visualisierung von Fahrzeugen und Fahrten ermöglichen. Die JavaScript-Flotte
Die Tracking-Bibliothek enthält eine JavaScript-Kartenkomponente, die ein Drop-in ist.
Ersetzen einer standardmäßigen google.maps.Map
-Entität und -Datenkomponenten
sich mit der Fleet Engine zu verbinden.
Komponenten
Die JavaScript-Flotten-Tracking-Bibliothek enthält Komponenten zur Visualisierung von Fahrzeuge und Wegpunkte sowie Rohdaten-Feeds für voraussichtliche Ankunftszeiten und Entfernung einer Fahrt.
Kartenansicht für das Flotten-Tracking
Mit der Komponente „Kartenansicht für das Flotten-Tracking“ können Sie den Standort von Fahrzeugen die Wegpunkte der Fahrt. Wenn die Route für ein Fahrzeug bekannt ist, animiert dieses Fahrzeug auf seiner vorhergesagten Strecke.
Standortanbieter
Standortanbieter nutzen in Fleet Engine gespeicherte Informationen, um Informationen zu beobachteten Objekten in die Karte mit dem Teilen der Route einfügen.
Anbieter von Fahrzeugstandorten
Der Anbieter von Fahrzeugstandorten zeigt die Standortinformationen eines einzelnen Fahrzeugs an. Sie enthält Informationen zum Fahrzeugstandort und zur aktuellen Fahrt, die dem Fahrzeug.
Flottenstandortanbieter
Der Flottenstandortanbieter zeigt Standortinformationen für mehrere Fahrzeuge an. Sie können nach einem bestimmten Fahrzeug und dessen Standort filtern oder die Fahrzeugstandorte für den gesamten Fuhrpark anzeigen.
Sichtbarkeit von beobachteten Orten festlegen
Mit Sichtbarkeitsregeln wird festgelegt, wann ein erfasstes Standortobjekt auf der Karte sichtbar ist für einen Fleet Engine-Standortanbieter. Hinweis: Verwendung eines benutzerdefinierten oder abgeleiteten Standorts kann der Anbieter die Sichtbarkeitsregeln ändern.
Fahrzeuge
Ein Fahrzeug ist sichtbar, sobald es in Fleet Engine erstellt wurde, und ist sichtbar
wenn „vehicle_state“ den Wert Online
hat. Das bedeutet, dass ein Fahrzeug auch noch
Wenn dem Fahrzeug keine aktuelle Fahrt zugewiesen ist.
Wegpunkt-Standortmarkierungen
Eine Wegpunkt-Standortmarkierung kennzeichnet Punkte entlang des Startpunkts der Fahrt eines Fahrzeugs. mit dem Startort und endend mit dem endgültigen Zielort. Wegpunktposition Markierungen können so definiert werden:
- Abfahrtsort: Gibt den Startort der Fahrt an.
- Mittel: Gibt Zwischenstopps für die Fahrt an
- Zielort – gibt den endgültigen Ort für die Fahrt an.
Geplante Fahrzeug-Wegpunkte werden auf der Karte als Startort, Zwischenland und Zielmarkierungen an.
Erste Schritte mit der JavaScript-Flotten-Tracking-Bibliothek
Bevor Sie die JavaScript-Flotten-Tracking-Bibliothek verwenden, sollten Sie mit Fleet Engine und dem Abrufen einer API Schlüssel. Erstellen Sie dann einen Anspruch auf eine Fahrt-ID und eine Fahrzeug-ID.
Anspruch auf Fahrt-ID und Fahrzeug-ID erstellen
Um Fahrzeuge anhand des Fahrzeugstandorts zu verfolgen , erstellen Sie ein JSON Web Token (JWT) mit einer Fahrt Anspruch auf Ausweis und Fahrzeugausweis.
Fügen Sie zum Erstellen der JWT-Nutzlast im Autorisierungsabschnitt eine zusätzliche Anforderung hinzu
mit den Schlüsseln tripid
und vehicleid
und setze die value
der einzelnen Tasten auf *.
Das Token sollte mit dem Fleet Engine Service Super User Cloud erstellt werden.
IAM-Rolle Beachten Sie, dass dadurch umfassenden Zugriff zum Erstellen, Lesen und Ändern von Flotten gewährt wird
Engine-Entitäten. Sie sollten nur für vertrauenswürdige Nutzer freigegeben werden.
Das folgende Beispiel zeigt, wie Sie ein Token für die Verfolgung nach Fahrzeug und Aufgabe:
{
"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": "*",
}
}
Abruf von Authentifizierungstokens erstellen
Die JavaScript Fleet Tracking Library fordert mithilfe der Authentifizierung ein Token an. Token-Abruf, wenn eine der folgenden Bedingungen zutrifft:
- Sie verfügt über kein gültiges Token, z. B. wenn der Fetcher bei ein neuer Seitenaufbau oder der Abruf mit keinem Token zurückgegeben wurde.
- 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 nutzt nicht den Fetcher aufrufen.
Sie können einen Abruf von Authentifizierungstokens erstellen, um ein Token abzurufen, das mit die entsprechenden Anforderungen auf Ihren Servern über ein Dienstkonto Zertifikat für Ihr Projekt. Tokens sollten nur auf Ihrem Server und geben Ihre Zertifikate niemals auf Clients frei. Andernfalls können Sie die Sicherheit Ihres Systems gefährden.
Der Fetcher muss eine Daten- Struktur mit zwei Feldern, die von einem Promise eingeschlossen sind:
- Einen String
token
. - Eine Zahl
expiresInSeconds
. Ein Token läuft in dieser Zeit ab nach abgerufen wird.
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(),
};
}
Behalten Sie bei der Implementierung des serverseitigen Endpunkts zum Erstellen der Tokens den Parameter im Hinterkopf:
- Der Endpunkt muss eine Ablaufzeit für das Token zurückgeben. im obigen Beispiel
wird dies als
data.ExpiresInSeconds
angegeben. - Beim Abrufen von Authentifizierungstokens muss die Ablaufzeit (in Sekunden, vom Zeitpunkt des Abrufs) an die Bibliothek übertragen, wie im Beispiel gezeigt.
- Der Parameter SERVER_TOKEN_URL hängt von Ihrer Back-End-Implementierung ab. Dies sind
Beispiel-URLs:
<ph type="x-smartling-placeholder">
- </ph>
- 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 Bibliothek für das Teilen von JavaScript-Recherchen geladen wird
von einer angegebenen URL. Der Parameter callback führt die Funktion initMap
aus.
nachdem die API geladen wurde. Mit dem Attribut defer kann der Browser das Rendern fortsetzen.
der Seite, 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 erfahren Sie, wie Sie mit der JavaScript-Flotten-Tracking-Bibliothek Fahrzeug. Stellen Sie sicher, dass die Bibliothek aus der Callback-Funktion geladen wird, die im das Script-Tag, bevor Sie den Code ausführen.
Anbieter von Fahrzeugstandorten instanziieren
In der JavaScript Fleet Tracking Library ist ein Standortanbieter für den On Demand Rides and Deliveries API 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 nach dem Laden der Bibliothek für das Teilen der Reise die Kartenansicht. und fügen es zur HTML-Seite hinzu. Ihre Seite sollte ein <div>-Element enthalten. der die Kartenansicht enthält. Das Element <div> heißt <div>, Beispiel unten.
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);
Auf Änderungsereignisse warten
Du kannst Metainformationen zu einem Fahrzeug aus dem vehicle
-Objekt abrufen
mithilfe des Standortanbieters. Die Metainformationen umfassen die voraussichtliche Ankunftszeit und die verbleibenden
Entfernung vor der nächsten Abholung oder Abgabe. Änderungen am Meta-Tag
Informationen lösen ein update-Ereignis aus. Das folgende Beispiel zeigt, wie die Wiedergabe funktioniert.
zu diesen Änderungsereignissen.
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 durch das Anfordern von Fahrzeuginformationen auftreten Fehlerereignisse. 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 du verhindern möchtest, dass der Standortanbieter das Fahrzeug verfolgt, entferne die Fahrzeug-ID vom Standortanbieter.
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 mit der Bibliothek für das Teilen von JavaScript-Reisen eine Fahrzeugflotte. Vergessen Sie nicht, die Bibliothek aus der Callback-Funktion zu laden. im Script-Tag angegeben, bevor Sie den Code ausführen.
Standortanbieter für Fahrzeugflotten instanziieren
In der Vorabeinstellung der JavaScript Fleet Tracking Library wird ein Standortanbieter definiert, der ruft mehrere Fahrzeuge aus der On Demand Rides and Deliveries API ab. Verwenden Sie Ihr Projekt-ID und 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 der auf der Karte angezeigten Fahrzeuge an.
Dieser Filter wird direkt an Fleet Engine übergeben. Weitere Informationen finden Sie unter
ListVehiclesRequest
für unterstützte Formate.
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. Standortermittlung
beginnt erst, wenn dieser festgelegt ist.
Sobald der Standortanbieter erstellt ist, initialisieren Sie die Karte.
Standortbeschränkung mithilfe des Darstellungsbereichs der Karte festlegen
Die locationRestriction
-Grenzen können so konfiguriert werden, dass sie mit dem Bereich übereinstimmen, der sichtbar ist in
in der Kartenansicht.
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
Sie können Metainformationen über die Flotte aus dem vehicles
-Objekt abrufen
mithilfe des Standortanbieters. Die Metainformationen enthalten Fahrzeugeigenschaften
wie Navigationsstatus, Entfernung zum nächsten Wegpunkt und benutzerdefinierte Attribute Siehe
Referenz
Dokumentation
. Eine Änderung an den Metainformationen löst ein Update-Ereignis aus. Die
Das folgende Beispiel zeigt, wie auf diese Änderungsereignisse gewartet wird.
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 bei der Anforderung von Fahrzeugflotteninformationen auftreten Fehlerereignisse auslösen. Beispiele für das Überwachen dieser Ereignisse finden Sie unter zu Auf Fehler warten.
Nicht mehr beobachten
Um zu verhindern, dass der Standortanbieter die Flotte verfolgt, legen Sie die Grenzen der Standortanbieter auf null gesetzt.
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
Um das Design der Karten-Komponente anzupassen, gestalten Sie Ihre Karte mithilfe von cloudbasierten Tools nutzen oder Optionen direkt im Code festlegen.
Cloudbasiertes Gestalten von Karteninhalten verwenden
Cloudbasiertes Gestalten von Karteninhalten
können Sie Kartenstile für alle Ihre Apps erstellen und bearbeiten, in denen Google Maps verwendet wird.
ohne Änderungen am Code vornehmen zu müssen. Die
Kartenstile werden als Karten-IDs in Ihrem Cloud-Projekt gespeichert. So wenden Sie einen Stil auf Ihre
JavaScript-Flotten-Tracking-Karte, geben Sie eine
mapId
beim Erstellen der JourneySharingMapView
. Das Feld „mapId
“ kann nicht geändert werden
oder hinzugefügt werden, nachdem JourneySharingMapView
instanziiert wurde. Die folgenden
In diesem 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
beim Erstellen der JourneySharingMapView
.
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 Erscheinungsbild von Markierungen, die der Karte hinzugefügt wurden. Dazu legen Sie benutzerdefinierte Markierungen fest, die dann von der Flottenverfolgungsbibliothek angewendet wird, bevor der Karte Markierungen hinzugefügt werden und bei jeder Aktualisierung von Markierungen.
Sie können eine einfache Anpassung erstellen, indem Sie eine
MarkerOptions
-Objekt, das auf alle Markierungen desselben Typs angewendet werden soll. Die Änderungen, die in den
werden nach dem Erstellen der einzelnen Markierungen angewendet und überschreiben dabei die
Optionen.
Als erweiterte Option können Sie eine Anpassungsfunktion angeben. Anpassungsfunktionen ermöglichen die Gestaltung von Markierungen auf der Grundlage von Daten sowie wie das Hinzufügen von Interaktivität zu Markierungen, wie z. B. Klickhandhabung. Insbesondere Flotte Bei der Verfolgung werden Daten über den Objekttyp, der Markierung steht für: Fahrzeug, Haltestelle oder Aufgabe. Dadurch können die Stile der Markierungen Sie ändern sich basierend auf dem aktuellen Status des Markierungselements selbst. Beispiel: Der Anzahl der verbleibenden Haltestellen oder Art der Aufgabe. Sie können sogar Daten aus Quellen außerhalb von Fleet Engine an und gestalten die Markierung auf der Grundlage dieser Informationen.
Außerdem können Sie mithilfe von Anpassungsfunktionen die Sichtbarkeit von Markierungen filtern.
Rufen Sie dazu
setVisible(false)
auf der Markierung.
Aus Leistungsgründen empfehlen wir jedoch, mit nativen Anzeigen
Filterung beim Standortanbieter, z. B.
FleetEngineFleetLocationProvider.vehicleFilter
Wenn Sie zusätzliche Filterfunktionen benötigen,
mithilfe der Anpassungsfunktion filtern.
Die Bibliothek für das Flotten-Tracking bietet die folgenden Anpassungsparameter:
Den Stil von Markierungen mit MarkerOptions
ändern
Das folgende Beispiel zeigt, wie Sie den Stil einer Fahrzeugmarkierung mit einem
MarkerOptions
-Objekt. Folgen Sie diesem Muster, um den Stil eines beliebigen
Markierung mithilfe eines der oben aufgeführten Parameter zur Anpassung der Markierung.
JavaScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
Den Stil von Markierungen mithilfe von Anpassungsfunktionen ändern
Das folgende Beispiel zeigt, wie Sie den Stil einer Fahrzeugmarkierung konfigurieren. Folgen dieses Muster, um den Stil einer beliebigen Markierung mithilfe der Markierung anzupassen. die oben aufgeführten Anpassungsparameter.
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}`);
};
Click Handling zu Markierungen
Das folgende Beispiel zeigt, wie Sie einer Fahrzeugmarkierung Click Handling hinzufügen. Folgen Sie diesem Muster, um Click Handling zu allen Markierungen hinzuzufügen, die eine der Markierungen verwenden. die oben aufgeführten Anpassungsparameter.
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 können, welche Fahrzeugmarkierungen sichtbar sind. Folgen Sie diesem Muster, um Markierungen mit einer der Markierungsanpassungen zu filtern. die oben aufgeführten Parameter.
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 Flotten-Tracking-Bibliothek können Sie auch das Erscheinungsbild
die Route des Fahrzeugs, dem Sie folgen, auf der Karte. Die Bibliothek erstellt ein
google.maps.Polyline
-Objekt für jedes Koordinatenpaar in den aktiven oder verbleibenden
path.
Sie können die Polyline
-Objekte gestalten, indem Sie Polylinienanpassungen angeben. Die
werden diese Anpassungen dann in zwei Situationen angewendet:
-Objekten zur Karte hinzugefügt wird und wann sich die für die -Objekte verwendeten Daten geändert haben.
Ähnlich wie bei der Anpassung von Markierungen können Sie eine Reihe von
PolylineOptions
auf alle übereinstimmenden Polyline
-Objekte angewendet, wenn sie
erstellt oder aktualisiert wurde.
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 Status von ändern.
des Fahrzeugs; Sie können z. B. das Polyline
-Objekt in einer tieferen Schattierung einfärben oder
wird es dicker, wenn das Fahrzeug langsamer fährt. Sie können sogar gegen
aus Quellen außerhalb von Fleet Engine ändern und das Polyline
-Objekt entsprechend gestalten.
Informationen.
Sie können die Anpassungen mithilfe der Parameter in den
FleetEngineVehicleLocationProviderOptions
Sie können Anpassungen für verschiedene Pfadzustände in der
die bereits gereist sind, aktiv reisen oder noch nicht gereist sind. Die
-Parameter sind wie folgt:
takenPolylineCustomization
, für einen bereits zurückgelegten Weg.activePolylineCustomization
, für eine sich aktiv bewegende Route;remainingPolylineCustomization
, noch nicht zurückgelegten Weg ein.
Stil von Polyline
-Objekten mit PolylineOptions
ändern
Das folgende Beispiel zeigt, wie der Stil für ein Polyline
-Objekt konfiguriert wird
mit
PolylineOptions
Folgen Sie diesem Muster, um den Stil eines Polyline
-Objekts mithilfe eines beliebigen
der zuvor aufgeführten Polylinienanpassungen.
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 die Methode zum Konfigurieren eines aktiven Polyline
-Objekts
Stile. Folgen Sie diesem Muster, um den Stil eines Polyline
-Objekts anzupassen
mithilfe der zuvor aufgeführten Parameter zur Anpassung der Polylinie.
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. So erstellen Sie ein Polyline
-Objekt:
unsichtbar werden,
visible
Property:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
Traffic-sensitive Polyline
-Objekte rendern
Fleet Engine gibt Daten zur Traffic-Geschwindigkeit für die aktiven und verbleibenden Pfade für
folgte. Anhand dieser Informationen können Sie den Polyline
gestalten.
-Objekten entsprechend ihrer Verkehrsgeschwindigkeit:
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 eine Fahrzeug- oder Standortmarkierung anzeigen
Sie können einen
InfoWindow
um zusätzliche Informationen zu einem Fahrzeug oder einer Standortmarkierung anzuzeigen.
Das folgende Beispiel zeigt, wie Sie ein InfoWindow
erstellen und an ein
Fahrzeugmarkierung.
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 sich der Darstellungsbereich der Karte automatisch an das Fahrzeug anpasst und Route berechnen, indem Sie die automatische Anpassung deaktivieren. Im folgenden Beispiel sehen Sie, Wie deaktiviere ich die automatische Anpassung beim Konfigurieren der Karte für das Teilen der Reise Ansicht.
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 ersetzen, die Markierungen oder andere Anpassungen enthält. ohne die Anpassungen zu verlieren.
Beispiel: Du hast eine Webseite mit einer standardmäßigen google.maps.Map
.
Entität, für die 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 zur Freigabe 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 - Ihre Anpassung in die Callback-Funktion für die Kartenansicht verschieben die Initialisierung bei.
- 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