Mit dem JavaScript SDK können Sie den Standort
von Fahrzeugen und Orten von Interesse, die in Fleet Engine erfasst werden. Bibliothek
eine JavaScript-Kartenkomponente enthält, die als Drop-in-Ersatz fungiert
für eine Standardentität google.maps.Map
und Datenkomponenten, die verbunden werden sollen
mit Fleet Engine. Mit dem JavaScript SDK
können Sie über Ihre Webanwendung eine anpassbare, animierte Fahrt- und Bestellfortschrittsanzeige erstellen.
Komponenten
Das JavaScript SDK bietet 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 „Kartenansicht“ des Fahrzeugs auf der vorhergesagten Wegbewegung.
Anbieter des Reiseziels
Das JavaScript SDK enthält eine Fahrtstelle. Anbieter, der Standortinformationen für beobachtete Objekte in Fahrt- und Bestellfortschritt
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. Sie markiert 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. Sie kann optional eine Route für das Fahrzeug angeben.
Abruf von Authentifizierungstokens
Um den Zugriff auf die in Fleet Engine gespeicherten Standortdaten zu steuern, müssen Sie Einen JSON Web Token (JWT) Minting-Dienst für Fleet Engine implementieren auf Ihrem Server. Implementieren Sie dann einen Abruf von Authentifizierungstokens als Teil Ihrer Webanwendung mit dem JavaScript SDK um den Zugriff auf die Standortdaten zu authentifizieren.
Stiloptionen
Marker und Polylinienstile bestimmen das Erscheinungsbild des erfasste Standortobjekte auf der Karte hinzufügen. Sie können Benutzerdefinierte Stiloptionen, um den Standardstil an den Stil anzupassen Ihrer Webanwendung.
Sichtbarkeit beobachteter Standorte steuern
In diesem Abschnitt werden die Sichtbarkeitsregeln für erfasste Standortobjekte beschrieben. für vordefinierte Standortanbieter von Fleet Engine. Benutzerdefiniert oder abgeleitet Standortanbieter können die Sichtbarkeitsregeln ändern.
Fahrzeuge
Ein Mitfahrfahrzeug ist ab dem Zeitpunkt der Zuweisung einer Fahrt sichtbar bis zum Zeitpunkt des Abbruchs. Wenn die Fahrt gestrichen wird, ist das Fahrzeug länger sichtbar.
Alle anderen Standortmarkierungen
Alle anderen Standortmarkierungen für Start-, Zielort und Wegpunkte sind immer auf der Karte angezeigt. Beispiel: Ein Mitfahrdienst oder ein Lieferort wird immer auf der Karte angezeigt, unabhängig davon, Status der Fahrt oder Lieferung.
Erste Schritte mit dem JavaScript SDK
Stellen Sie vor der Verwendung des JavaScript SDK sicher, vertraut mit Fleet Engine und mit dem Abrufen eines API-Schlüssels.
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 über den Anbieter der Fahrtroute verfolgen möchten, gehen Sie so vor: 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 hinzu mit dem Schlüssel tripid und legen 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 Abrufer für Authentifizierungstokens erstellen, um ein Miniertes Token abzurufen. mit den entsprechenden Anforderungen auf Ihren Servern über einen Dienst, Kontozertifikat für Ihr Projekt. Es ist wichtig, nur Tokens zu erstellen. auf Ihren Servern und geben Sie Ihre Zertifikate niemals an Clients weiter. Andernfalls gefährden Sie die Sicherheit Ihres Systems.
Der Fetcher muss eine Datenstruktur zurückgeben. 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 JavaScript Consumer SDK fordert über das Authentifizierungstoken ein Token an. Fetcher, 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 das SDK das zuvor ausgestellte, noch gültige Token und verwendet keine ruft den Fetcher 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(),
};
}
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 Beispiel
oben als
data.ExpiresInSeconds
angegeben. - Beim Abrufen von Authentifizierungstokens muss die Ablaufzeit (in Sekunden, ab dem Zeitpunkt des Abrufs) in die Bibliothek übertragen, wie im Beispiel gezeigt.
- SERVER_TOKEN_URL hängt von der Implementierung Ihres Anbieters ab. Dies sind die URLs für den Beispielanbieter:
<ph type="x-smartling-placeholder">
- </ph>
- 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 geladen wird.
von einer angegebenen URL. Der callback-Parameter führt die initMap
aus.
nachdem die API geladen wurde. Mit dem Attribut defer kann der Browser
Fahren Sie mit dem Rendern des Rests der Seite fort, 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 erfahren Sie, wie Sie das JavaScript SDK verwenden. einer Fahrt mit einem Mitfahrdienst oder einem Lieferdienst zu folgen. Achten Sie darauf, Bibliothek aus der im Script-Tag angegebenen Callback-Funktion laden bevor Sie den Code ausführen.
Anbieter von Reisezielen instanziieren
Durch das JavaScript SDK wird ein Standortanbieter vordefiniert für die Fleet Engine Ridesharing API. 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. Kartenansicht und fügen sie der HTML-Seite hinzu. Ihre Seite sollte Folgendes enthalten: Ein <div>-Element, das die Kartenansicht enthält Das <div>-Element heißt im folgenden Beispiel map_canvas.
Lege die Fahrt-ID für den Standortanbieter fest, um Rennbedingungen zu vermeiden im Callback, der nach der Initialisierung der Karte aufgerufen wird.
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
Sie können Metainformationen zu einer Fahrt aus dem Aufgabenobjekt abrufen mithilfe des Standortanbieters. Die Metainformationen umfassen die voraussichtliche Ankunftszeit und verbleibende Strecke vor dem Start oder der Abgabe. Änderungen an den Metainformationen Ein update-Ereignis wird ausgelöst. 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 auftreten Fehlerereignisse. 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:Bibliotheksaufrufe müssen in try...catch
-Blöcken umschlossen werden.
um unerwartete Fehler zu beheben.
Nicht mehr beobachten
Um zu verhindern, dass der Standortanbieter die Fahrt verfolgt, entfernen Sie die Fahrt-ID aus Standortanbieter
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
Um das Design der Google Maps-Komponente anzupassen, Karten gestalten oder indem Sie Optionen direkt im Code festlegen.
Cloudbasiertes Gestalten von Karteninhalten
Cloudbasiertes Gestalten von Karteninhalten
können Sie Kartenstile für alle Ihre Apps erstellen und bearbeiten, in denen Google Maps verwendet wird.
über die Google Cloud Console erstellen, ohne dass Änderungen am Code erforderlich sind.
Die Kartenstile werden als Karten-IDs in Ihrem Cloud-Projekt gespeichert. Bis
und wenden Sie einen Stil auf Ihre JavaScript SDK-Karte an,
mapId
und alle anderen mapOptions
wenn Sie die JourneySharingMapView
erstellen. Das Feld „mapId
“ kann nicht geändert werden
oder hinzugefügt werden, nachdem JourneySharingMapView
instanziiert wurde. Die folgenden
Beispiels zeigt, wie Sie einen zuvor erstellten Kartenstil mit einem
Karten-ID.
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
, wenn Sie
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 von Markierungen anpassen, die auf der Karte. Dazu legen Sie Anpassungen fest, die der Das JavaScript SDK wird dann vor dem Hinzufügen von Markierungen zur Karte und bei jeder Markierung aktualisiert
Die einfachste Anpassung besteht darin,
MarkerOptions
-Objekt, das auf alle Markierungen desselben Typs angewendet wird. Die Änderungen
die im -Objekt angegeben sind, werden angewendet, nachdem die einzelnen Markierungen erstellt wurden.
Standardoptionen überschreiben.
Eine erweiterte Option besteht darin, eine Anpassungsfunktion anzugeben. Anpassung -Funktionen ermöglichen die Gestaltung von Markierungen basierend auf Daten sowie das Hinzufügen von Interaktivität von Markierungen, wie z. B. Klickhandhabung. Insbesondere „Reise und Bestellung“ Beim Fortschritt werden Daten über den Typ des Objekts an die Anpassungsfunktion übergeben. Markierung steht für: Fahrzeug, Startpunkt, Wegpunkt oder Ziel. Dadurch können dann Markierungsstil, der basierend auf dem aktuellen Status des Markierungselements geändert werden soll sich selbst; z. B. die Anzahl der verbleibenden Wegpunkte, bis das Fahrzeug fertig ist der Fahrt. Sie können sogar Daten aus Quellen außerhalb von Fleet Engine zusammenführen, 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
Das folgende Beispiel zeigt, wie Sie den Stil einer Fahrzeugmarkierung mit
Ein MarkerOptions
-Objekt. Folgen Sie diesem Muster, um den Stil eines beliebigen
Markierung mithilfe einer der zuvor aufgeführten Markierungsanpassungen.
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 zuvor aufgeführten Anpassungsparameter.
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 Click Handling zu allen Markierungen hinzuzufügen, die eine der Markierungen verwenden. der bereits aufgelisteten Anpassungsparameter.
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 außerdem das Erscheinungsbild der Fahrt
auf der Karte anzeigen. 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
FleetEngineTripLocationProviderOptions
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.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. 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 =
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
Sie können ein InfoWindow
-
um zusätzliche Informationen zu einem Fahrzeug oder einer Standortmarkierung anzuzeigen.
Das folgende Beispiel zeigt, wie Sie eine InfoWindow
erstellen und anhängen.
zu einer Fahrzeugmarkierung hinzufügen:
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 angepasst wird und berechnet die Route, indem Sie die automatische Anpassung deaktivieren. Im folgenden Beispiel zeigt, wie die automatische Anpassung deaktiviert wird, wenn Sie Fahrt und Reihenfolge konfigurieren Fortschrittskartenansicht.
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
Mit dem JavaScript SDK können Sie eine vorhandene Karte, 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 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 dem ID in der Nähe von Uluru angegeben haben, wird sie jetzt auf der Karte gerendert.