Mit dem JavaScript SDK können Sie den Standort von Fahrzeugen sowie die Standorte von Interesse visualisieren, die in Fleet Engine erfasst werden. Die Bibliothek enthält eine JavaScript-Kartenkomponente, die als Drop-in-Ersatz eine standardmäßige google.maps.Map
-Entität und Datenkomponenten zur Verbindung mit Fleet Engine ersetzt. Mit dem JavaScript SDK kannst du über deine Webanwendung eine anpassbare, animierte Fahrt- und Bestellabwicklung erstellen.
Komponenten
Das JavaScript SDK umfasst Komponenten zur Visualisierung von Fahrzeugen und Wegpunkten sowie Rohdaten-Feeds für die voraussichtliche Ankunftszeit eines Fahrers oder die verbleibende Strecke.
Kartenansicht für Fahrt- und Bestellfortschritt
Mit der Komponente „Kartenansicht“ werden die Position von Fahrzeugen und Wegpunkten visualisiert. Wenn die Route für ein Fahrzeug bekannt ist, animiert die Komponente für die Kartenansicht das Fahrzeug, während es sich auf dem vorhergesagten Weg bewegt.
Anbieter des Reiseziels
Das JavaScript SDK umfasst einen Anbieter, der Standortinformationen für erfasste Objekte in die Fahrt- und Bestellfortschrittskarte einfließt.
Mit dem Anbieter des Reiseziels können Sie Folgendes verfolgen:
- Der Start- oder Zielort einer Fahrt.
- Der Standort und die Route des Fahrzeugs, das der Fahrt zugewiesen ist.
Erfasste Standortobjekte
Der Standortanbieter erfasst den Standort von Objekten wie Wegpunkten und Fahrzeugen.
Startort
Der Startort ist der Ort, an dem eine Fahrt beginnt. Es markiert den Abholort.
Zielspeicherort
Der Zielort ist der Ort, an dem eine Fahrt endet. Sie kennzeichnet den Abgabeort.
Standort des Wegpunkts
Ein Wegpunkt ist jeder Ort entlang der Route einer aufgezeichneten Fahrt. Beispielsweise ist jede Haltestelle auf einer Busroute ein Wegpunkt.
Fahrzeugstandort
Der Fahrzeugstandort ist der nachverfolgte Standort eines Fahrzeugs. Optional kann eine Route für das Fahrzeug angegeben werden.
Abruf von Authentifizierungstokens
Wenn Sie den Zugriff auf die in Fleet Engine gespeicherten Standortdaten steuern möchten, müssen Sie auf Ihrem Server einen JWT-Minting-Dienst (JSON Web Token) für Fleet Engine implementieren. Implementieren Sie dann einen Abruf von Authentifizierungstokens als Teil Ihrer Webanwendung und verwenden Sie das JavaScript SDK, um den Zugriff auf die Standortdaten zu authentifizieren.
Stiloptionen
Markierungs- und Polylinienstile bestimmen das Design der erfassten Standortobjekte auf der Karte. Mit benutzerdefinierten Stiloptionen können Sie den Standardstil so ändern, dass er zum Stil Ihrer Webanwendung passt.
Sichtbarkeit beobachteter Standorte steuern
In diesem Abschnitt werden die Sichtbarkeitsregeln für erfasste Standortobjekte auf der Karte für vordefinierte Standortanbieter von Fleet Engine beschrieben. Anbieter von benutzerdefinierten oder abgeleiteten Standorten können die Sichtbarkeitsregeln ändern.
Fahrzeuge
Ein Mitfahrfahrzeug ist von der Zuweisung bis zur Abgabe sichtbar. Wenn die Fahrt gestrichen wird, ist das Fahrzeug länger sichtbar.
Alle anderen Standortmarkierungen
Alle anderen Standortmarkierungen für Start-, Zielort und Wegpunkte werden immer auf der Karte angezeigt. Beispielsweise ist ein Abgabeort für einen Mitfahrdienst oder ein Lieferort immer auf der Karte zu sehen, unabhängig vom Status der Fahrt oder Zustellung.
Erste Schritte mit dem JavaScript SDK
Bevor Sie das JavaScript SDK verwenden, sollten Sie sich mit Fleet Engine und dem Abrufen eines API-Schlüssels vertraut machen.
Wenn Sie eine Fahrt mit einem Mitfahrdienst verfolgen möchten, müssen Sie zuerst einen Reise-ID-Anspruch erstellen.
Anspruch auf Reise-ID erstellen
Wenn Sie eine Fahrt mit dem Reiseanbieter verfolgen möchten, erstellen Sie ein JSON Web Token (JWT) mit einer Fahrt-ID-Anforderung.
Fügen Sie zum Erstellen der JWT-Nutzlast im Autorisierungsabschnitt eine zusätzliche Anforderung mit dem Schlüssel tripid hinzu und legen Sie als Wert die Fahrt-ID fest.
Das folgende Beispiel zeigt, wie ein Token für die Verfolgung nach Fahrt-ID erstellt wird:
{
"alg": "RS256",
"typ": "JWT",
"kid": "private_key_id_of_consumer_service_account"
}
.
{
"iss": "consumer@yourgcpproject.iam.gserviceaccount.com",
"sub": "consumer@yourgcpproject.iam.gserviceaccount.com",
"aud": "https://fleetengine.googleapis.com/",
"iat": 1511900000,
"exp": 1511903600,
"scope": "https://www.googleapis.com/auth/xapi",
"authorization": {
"tripid": "tid_12345",
}
}
Abruf von Authentifizierungstokens erstellen
Sie können einen Abruf von Authentifizierungstokens erstellen, um mithilfe eines Dienstkontozertifikats für Ihr Projekt ein Token mit den entsprechenden Anforderungen auf Ihren Servern abzurufen. Es ist wichtig, nur Tokens auf Ihren Servern zu erstellen und Ihre Zertifikate nie auf Clients zu teilen. Andernfalls gefährden Sie die Sicherheit Ihres Systems.
Der Fetcher muss eine Datenstruktur mit zwei Feldern zurückgeben, die in ein Promise eingeschlossen sind:
- Einen String
token
. - Eine Zahl
expiresInSeconds
. Ein Token läuft in dieser Zeit nach dem Abruf ab.
Das JavaScript Consumer SDK fordert über den Authentifizierungstoken-Abruf ein Token an, wenn eine der folgenden Bedingungen zutrifft:
- Sie verfügt über kein gültiges Token, z. B. wenn der Fetcher bei einem neuen Seitenaufbau nicht aufgerufen wurde oder der Fetcher nicht mit einem Token zurückgegeben hat.
- Das zuvor abgerufene Token ist abgelaufen.
- Das zuvor abgerufene Token läuft innerhalb einer Minute ab.
Andernfalls verwendet das SDK das zuvor ausgegebene, noch gültige Token und ruft den Fetcher nicht auf.
Das folgende Beispiel zeigt, wie ein Authentifizierungstoken-Abruf erstellt wird:
JavaScript
async 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.jwt,
expiresInSeconds: data.expirationTimestamp - Date.now(),
};
}
Beachten Sie beim Implementieren des serverseitigen Endpunkts zum Erstellen der Tokens Folgendes:
- Der Endpunkt muss eine Ablaufzeit für das Token zurückgeben. Im obigen Beispiel wird dies als
data.ExpiresInSeconds
angegeben. - Der Abruf von Authentifizierungstokens muss die Ablaufzeit (in Sekunden ab dem Zeitpunkt des Abrufs) wie im Beispiel gezeigt an die Bibliothek übergeben.
- SERVER_TOKEN_URL hängt von der Implementierung Ihres Anbieters ab. Dies sind die URLs für den Beispielanbieter:
- https://
SERVER_URL
/token/driver/VEHICLEID
- https://
SERVER_URL
/token/consumer/TRIPID
- https://
Karte aus HTML laden
Das folgende Beispiel zeigt, wie das JavaScript SDK 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 weiter rendern, während die API geladen wird.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
Eine Reise verfolgen
In diesem Abschnitt wird beschrieben, wie Sie das JavaScript SDK verwenden, um einer Fahrt mit einem Mitfahrdienst oder einer Lieferung zu folgen. Laden Sie die Bibliothek aus der im Skript-Tag angegebenen Callback-Funktion, bevor Sie den Code ausführen.
Anbieter von Reisezielen instanziieren
Im JavaScript SDK wird ein Standortanbieter für die Fleet Engine Ridesharing API vorab definiert. Verwenden Sie Ihre Projekt-ID und einen Verweis auf Ihre Token-Factory, um sie zu instanziieren.
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineTripLocationProvider({
projectId: 'your-project-id',
authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step
// Optionally, you may specify a trip ID to
// immediately start tracking.
tripId: 'your-trip-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineTripLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify a trip ID to
// immediately start tracking.
tripId: 'your-trip-id',
});
Kartenansicht initialisieren
Initialisieren Sie nach dem Laden des JavaScript SDK die Kartenansicht und fügen Sie sie der HTML-Seite hinzu. Ihre Seite sollte ein <div>-Element enthalten, das die Kartenansicht enthält. Das Element <div> heißt im folgenden Beispiel map_canvas.
Legen Sie die Fahrt-ID für den Standortanbieter im Callback fest, der nach der Initialisierung der Karte aufgerufen wird, um Race-Bedingungen zu vermeiden.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
vehicleMarkerCustomization: vehicleMarkerCustomization,
activePolylineCustomization: activePolylineCustomization,
// Any undefined styling options will use defaults.
});
// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.tripId = 'your-trip-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({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
vehicleMarkerCustomization: vehicleMarkerCustomization,
activePolylineCustomization: activePolylineCustomization,
// Any undefined styling options will use defaults.
});
// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
locationProvider.tripId = 'your-trip-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({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);
Auf Änderungsereignisse warten
Mithilfe des Standortanbieters können Sie Metainformationen zu einer Fahrt aus dem Aufgabenobjekt abrufen. Die Metainformationen enthalten die voraussichtliche Ankunftszeit und die verbleibende Strecke vor dem Start oder der Abgabe. Änderungen an den Metainformationen lösen ein update-Ereignis aus. Das folgende Beispiel zeigt, wie auf diese Änderungsereignisse gewartet wird.
JavaScript
locationProvider.addListener('update', e => {
// e.trip contains data that may be useful
// to the rest of the UI.
console.log(e.trip.dropOffTime);
});
TypeScript
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
// e.trip contains data that may be useful
// to the rest of the UI.
console.log(e.trip.dropOffTime);
});
Fehler verarbeiten
Fehler, die asynchron durch das Anfordern von Fahrtinformationen entstehen, lösen Fehlerereignisse aus. Das folgende Beispiel zeigt, wie auf diese Ereignisse gewartet wird, um Fehler zu beheben.
JavaScript
locationProvider.addListener('error', e => {
// e.error contains the error that triggered the
// event
console.error(e.error);
});
TypeScript
locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
// e.error contains the error that triggered the
// event
console.error(e.error);
});
Hinweis:Bibliothekaufrufe müssen in try...catch
-Blöcken umschlossen werden, um unerwartete Fehler zu vermeiden.
Nicht mehr beobachten
Wenn der Standortanbieter die Fahrt nicht mehr verfolgen soll, entfernen Sie die Fahrt-ID.
JavaScript
locationProvider.tripId = '';
TypeScript
locationProvider.tripId = '';
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
Wenn Sie das Erscheinungsbild der Kartenkomponente anpassen möchten, können Sie mit cloudbasierten Tools Ihre Karte gestalten oder Optionen direkt im Code festlegen.
Cloudbasiertes Gestalten von Karteninhalten
Mit dem cloudbasierten Gestalten von Karteninhalten können Sie über die Google Cloud Console Kartenstile für alle Apps, in denen Google Maps verwendet wird, erstellen und bearbeiten, ohne dass Änderungen am Code erforderlich sind.
Die Kartenstile werden als Karten-IDs in Ihrem Cloud-Projekt gespeichert. Wenn Sie einen Stil auf Ihre JavaScript SDK-Karte anwenden möchten, geben Sie beim Erstellen der JourneySharingMapView
einen mapId
und einen beliebigen anderen mapOptions
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'
}
// and any other styling options.
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// and any other styling options.
});
Codebasiertes Gestalten von Karteninhalten verwenden
Eine weitere Möglichkeit zum Anpassen des Kartenstils besteht darin, mapOptions
festzulegen, wenn Sie die JourneySharingMapView
erstellen.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
Benutzerdefinierte Markierungen verwenden
Mit dem JavaScript SDK können Sie das Design der in eine Karte eingefügten Markierungen anpassen. Dazu müssen Sie die Anpassungen von Markierungen festlegen, die das JavaScript SDK vor dem Hinzufügen von Markierungen zur Karte und bei jeder Markierungsaktualisierung anwendet.
Die einfachste Anpassung besteht darin, ein MarkerOptions
-Objekt anzugeben, das auf alle Markierungen desselben Typs angewendet wird. Die im Objekt angegebenen Änderungen werden angewendet, nachdem die einzelnen Markierungen erstellt wurden. Dabei werden alle Standardoptionen überschrieben.
Eine erweiterte Option besteht darin, eine Anpassungsfunktion anzugeben. Mithilfe von Anpassungsfunktionen können Sie Markierungen basierend auf Daten gestalten und den Markierungen interaktive Elemente hinzufügen, z. B. den Umgang mit Klicks. Genauer gesagt übergibt der Fahrt- und Bestellfortschritt Daten zu dem Objekttyp, den die Markierung repräsentiert: Fahrzeug, Startpunkt, Wegpunkt oder Ziel an die Anpassungsfunktion. So kann sich der Markierungsstil je nach aktuellem Status des Markierungselements ändern, z. B. die Anzahl der verbleibenden Wegpunkte, bis das Fahrzeug die Fahrt beendet. Sie können sogar Daten aus Quellen außerhalb von Fleet Engine zusammenführen und die Markierung basierend auf diesen Informationen gestalten.
Das JavaScript SDK bietet die folgenden Anpassungsparameter in FleetEngineTripLocationProviderOptions
:
vehicleMarkerCustomization
originMarkerCustomization
waypointMarkerCustomization
destinationMarkerCustomization
Den Stil von Markierungen mit MarkerOptions
ändern
Im folgenden Beispiel wird gezeigt, wie Sie den Stil einer Fahrzeugmarkierung mit einem MarkerOptions
-Objekt konfigurieren. Folgen Sie diesem Muster, um den Stil einer beliebigen Markierung mithilfe einer der zuvor aufgeführten Markierungsanpassungen anzupassen.
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 Sie diesem Muster, um den Stil einer Markierung mithilfe der zuvor aufgeführten Parameter zur Anpassung von Markierungen anzupassen.
JavaScript
vehicleMarkerCustomization =
(params) => {
var distance = params.trip.remainingWaypoints.length;
params.marker.setLabel(`${distance}`);
};
TypeScript
vehicleMarkerCustomization =
(params: TripMarkerCustomizationFunctionParams) => {
const distance = params.trip.remainingWaypoints.length;
params.marker.setLabel(`${distance}`);
};
Click Handling zu Markierungen
Das folgende Beispiel zeigt, wie Sie einer Fahrzeugmarkierung Click Handling hinzufügen. Folgen Sie diesem Muster, um mithilfe der zuvor aufgeführten Parameter zur Anpassung von Markierungen einer Markierung Klickbehandlung hinzuzufügen.
JavaScript
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
vehicleMarkerCustomization =
(params: TripMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
Polylinienanpassungen verwenden
Mit dem JavaScript SDK können Sie auch das Design der Fahrtroute auf der Karte anpassen. Die Bibliothek erstellt für jedes Koordinatenpaar im aktiven oder verbleibenden Pfad des Fahrzeugs ein google.maps.Polyline
-Objekt.
Sie können die Polyline
-Objekte gestalten, indem Sie Polylinienanpassungen angeben. Diese Anpassungen werden dann in zwei Situationen angewendet: bevor die Objekte zur Karte hinzugefügt werden und wenn sich die für die Objekte verwendeten Daten geändert haben.
Ähnlich wie bei der Anpassung von Markierungen können Sie eine Gruppe von PolylineOptions
angeben, die auf alle übereinstimmenden Polyline
-Objekte angewendet wird, wenn sie erstellt oder aktualisiert werden.
Ebenso können Sie eine Anpassungsfunktion angeben. Anpassungsfunktionen ermöglichen eine individuelle Gestaltung der Objekte auf der Grundlage von Daten, die von Fleet Engine gesendet werden.
Die Funktion kann den Stil jedes Objekts basierend auf dem aktuellen Status des Fahrzeugs ändern. Beispielsweise kann das Polyline
-Objekt eine tiefere Schattierung erhalten oder es dicker machen, wenn das Fahrzeug langsamer fährt. Sie können sogar einen Join aus Quellen außerhalb von Fleet Engine durchführen und das Polyline
-Objekt basierend auf diesen Informationen gestalten.
Sie können die Anpassungen mithilfe der in FleetEngineTripLocationProviderOptions
bereitgestellten Parameter angeben.
Sie können Anpassungen für verschiedene Pfadzustände auf der Fahrt des Fahrzeugs festlegen – bereits zurückgelegt, aktiv unterwegs oder noch nicht zurückgelegt. Die Parameter sind:
takenPolylineCustomization
für einen bereits zurückgelegten Pfad;activePolylineCustomization
für eine sich aktiv bewegende Route;remainingPolylineCustomization
, für einen noch nicht zurückgelegten Weg.
Stil von Polyline
-Objekten mit PolylineOptions
ändern
Das folgende Beispiel zeigt, wie Sie den Stil für ein Polyline
-Objekt mit PolylineOptions
konfigurieren.
Folgen Sie diesem Muster, um den Stil eines Polyline
-Objekts mit einer der zuvor aufgeführten Polylinienanpassungen anzupassen.
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
Den Stil von Polyline
-Objekten mithilfe von Anpassungsfunktionen ändern
Das folgende Beispiel zeigt, wie Sie das Gestalten eines aktiven Polyline
-Objekts konfigurieren. Folgen Sie diesem Muster, um den Stil eines beliebigen Polyline
-Objekts mithilfe der oben aufgeführten Parameter zur Anpassung der Polylinie anzupassen.
JavaScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.trip.remainingWaypoints[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: TripPolylineCustomizationFunctionParams) => {
const distance = params.trip.remainingWaypoints[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. Um ein Polyline
-Objekt unsichtbar zu machen, legen Sie dessen Attribut visible
fest:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
Traffic-sensitive Polyline
-Objekte rendern
Fleet Engine gibt Daten zur Verkehrsgeschwindigkeit für die aktiven und verbleibenden Pfade für das Folgen zurück. Anhand dieser Informationen können Sie die Polyline
-Objekte entsprechend ihrer Trafficgeschwindigkeit gestalten:
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 =
FleetEngineTripLocationProvider.
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) => {
FleetEngineTripLocationProvider.
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 =
FleetEngineTripLocationProvider.
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: TripPolylineCustomizationFunctionParams) => {
FleetEngineTripLocationProvider.
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
Mit einem InfoWindow
lassen sich zusätzliche Informationen zu einem Fahrzeug oder einer Standortmarkierung anzeigen.
Das folgende Beispiel zeigt, wie Sie ein InfoWindow
erstellen und an eine Fahrzeugmarkierung anhängen:
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', e => {
const stopsCount = e.trip.remainingWaypoints.length;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 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});
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
const stopsCount = e.trip.remainingWaypoints.length;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 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 für Fahrt und Bestellfortschritt konfigurieren.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
Vorhandene Karte ersetzen
Sie können das JavaScript SDK verwenden, um eine vorhandene Karte mit Markierungen oder anderen Anpassungen zu ersetzen, ohne dass diese 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 Uluru
var uluru = {lat: -25.344, lng: 131.036};
// The map, centered at Uluru
var map = new google.maps.Map(document.getElementById('map'));
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, 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 das JavaScript SDK hinzu:
- Fügen Sie Code für die Authentifizierungstoken-Factory hinzu.
- Initialisieren Sie einen Standortanbieter in der Funktion
initMap()
. - Initialisieren Sie die Kartenansicht in der
initMap()
-Funktion. Die Ansicht enthält die Karte. - Verschieben Sie Ihre Anpassungen in die Callback-Funktion für die Initialisierung der Kartenansicht.
- Fügen Sie dem API-Ladeprogramm die Standortbibliothek hinzu.
Das folgende Beispiel zeigt die erforderlichen Änderungen:
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
let locationProvider;
// (1) Authentication Token Fetcher
async 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.
locationProvider = new google.maps.journeySharing.FleetEngineTripLocationProvider({
projectId: "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
});
locationProvider.tripId = TRIP_ID;
// (4) Add customizations like before.
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
// The map, centered at Uluru
var map = mapView.map;
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, 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 SDK to the API loader.
-->
<script defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
</script>
</body>
</html>
Wenn Sie eine Fahrt mit der angegebenen ID in der Nähe von Uluru durchführen, wird sie jetzt auf der Karte gerendert.