Mit der JavaScript-Flotten-Tracking-Bibliothek können Sie die Standorte visualisieren,
von Fahrzeugen in ihren Flotten nahezu in Echtzeit. Die Bibliothek verwendet die
Deliveries API
um die Visualisierung von Lieferfahrzeugen und -aufgaben zu ermöglichen. Zum Beispiel
JavaScript Shipment Tracking Library
Es enthält eine JavaScript-Kartenkomponente, die als Drop-in-Ersatz fungiert.
für eine Standardentität google.maps.Map
und Datenkomponenten, die verbunden werden sollen
mit Fleet Engine.
Komponenten
Die JavaScript-Flotten-Tracking-Bibliothek enthält Komponenten für die Visualisierung von Lieferfahrzeugen und -stopps sowie Rohdaten-Feeds für voraussichtliche Ankunftszeiten Entfernung bis zur Lieferung.
Kartenansicht für das Flotten-Tracking
Mit der Komponente „Flotten-Tracking“ in der Kartenansicht Standort von Fahrzeugen und Aufgaben. Wenn die Route für ein Fahrzeug bekannt ist, wird mit der Komponente „Kartenansicht“ das Fahrzeug animiert, während es sich auf dem vorhergesagten Weg bewegt.
Standortanbieter
Standortanbieter nutzen in Fleet Engine gespeicherte Informationen, um Informationen zu beobachteten Objekten in die Karte mit dem Teilen der Route einfügen.
Standortanbieter des Lieferfahrzeugs
Der Standortanbieter für Lieferfahrzeuge zeigt die Standortinformationen. Sie enthält Informationen zum Fahrzeugstandort und zur Aufgaben, die vom Lieferfahrzeug erledigt wurden.
Standortanbieter für Lieferflotten
Der Anbieter des Flottenstandorts zeigt die Standort Informationen. Sie können nach bestimmten Fahrzeugen oder Standorten filtern oder für die gesamte Flotte.
Sichtbarkeit von beobachteten Orten festlegen
In diesem Abschnitt werden die Sichtbarkeitsregeln für erfasste Standortobjekte beschrieben. für den vordefinierten Standortanbieter von Fleet Engine. Benutzerdefiniert oder abgeleitet Standortanbieter können die Sichtbarkeitsregeln ändern.
Lieferfahrzeuge
Ein Lieferfahrzeug ist sichtbar, sobald es in Fleet Engine erstellt wird. und ist unabhängig von den Aufgaben auf der gesamten Route sichtbar.
Standortmarkierungen für Aufgaben
Geplante Haltestellen werden auf der Karte als Haltestellenmarkierungen angezeigt. Marker für abgeschlossene Aufgaben in einem anderen Stil angezeigt wird geplante Haltestellen.
Die Position der Aufgabenergebnisse wird mit Aufgabenergebnismarkierungen angezeigt. Aufgaben, deren Ergebnis ERFOLGREICH ist, werden mit Markierungen für erfolgreiche Aufgaben angezeigt, während alle anderen Aufgaben mit Markierungen für nicht erfolgreiche Aufgaben angezeigt werden.
Erste Schritte mit der JavaScript-Flotten-Tracking-Bibliothek
Bevor Sie die JavaScript-Flotten-Tracking-Bibliothek verwenden, stellen Sie sicher, dass Sie sind mit Fleet Engine vertraut und mit dem Abrufen eines API-Schlüssels. Erstellen Sie dann eine Aufgaben-ID und einen Anspruch auf die Fahrzeug-ID des Lieferfahrzeugs.
Aufgaben-ID und Anspruch auf Lieferfahrzeug-ID erstellen
Um Lieferfahrzeuge mit dem Standortanbieter für Lieferfahrzeuge zu verfolgen, ein JSON Web Token (JWT) mit einer Aufgaben-ID und einem Claim zur Auslieferungsfahrzeug-ID erstellen
Fügen Sie zum Erstellen der JWT-Nutzlast im Autorisierungsabschnitt eine zusätzliche Anforderung hinzu mit den Schlüsseln taskid und deliveryvehicleid und legen Sie den Wert fest. jedes Schlüssels an *. Das Token sollte mit der Fleet Engine erstellt werden. Dienst-Superuser. Beachten Sie, dass Sie hiermit umfassenden Zugriff zum Erstellen, Lesen und Ändern von Fleet Engine-Entitäten. mit vertrauenswürdigen Nutzern.
Das folgende Beispiel zeigt, wie du ein Token für das Tracking nach Fahrzeugen erstellst 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": {
"taskid": "*",
"deliveryvehicleid": "*",
}
}
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.
Die JavaScript Fleet Tracking Library fordert über die 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.
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 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 Ihrer Back-End-Implementierung ab. Dies sind die URLs für das Back-End der Beispiel-App:
<ph type="x-smartling-placeholder">
- </ph>
- https://
SERVER_URL
/token/delivery_driver/DELIVERY_VEHICLE_ID
- https://
SERVER_URL
/token/delivery_consumer/TRACKING_ID
- https://
SERVER_URL
/token/fleet_reader
- https://
Karte aus HTML laden
Das folgende Beispiel zeigt, wie das Teilen von JavaScript-Recherchen geladen wird
Bibliothek von einer angegebenen URL abzurufen. 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>
Einem Lieferfahrzeug folgen
In diesem Abschnitt wird beschrieben, wie Sie die JavaScript-Flotten-Tracking-Bibliothek verwenden einem Lieferfahrzeug zu folgen. Achten Sie darauf, Bibliothek aus der im Script-Tag angegebenen Callback-Funktion laden bevor Sie den Code ausführen.
Anbieter eines Lieferorts für ein Fahrzeug instanziieren
In der JavaScript-Flotten-Tracking-Bibliothek ist ein Standortanbieter vordefiniert für die Fleet Engine Deliveries API. Verwenden Sie Ihre Projekt-ID und einen Verweis auf Ihre Token-Factory, um sie zu instanziieren.
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// deliveryVehicleId to immediately start
// tracking.
deliveryVehicleId: 'your-delivery-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// deliveryVehicleId to immediately start
// tracking.
deliveryVehicleId: 'your-delivery-id',
});
Kartenansicht initialisieren
Nach dem Laden der Bibliothek für das Teilen von Kaufprozessen initialisieren 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.
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 delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
Auf Änderungsereignisse warten
Sie können Metainformationen zu einer Aufgabe aus dem deliveryVehicle
-Objekt abrufen
mithilfe des Standortanbieters. Die Metainformationen umfassen die voraussichtliche Ankunftszeit und
verbleibende Strecke bis zur nächsten Abholung oder Abgabe. Änderungen
den Metainformationen wird ein update-Ereignis ausgelöst. Im folgenden Beispiel
zeigt, wie auf diese Änderungsereignisse gewartet wird.
JavaScript
locationProvider.addListener('update', e => {
// e.deliveryVehicle contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicle) {
console.log(e.deliveryVehicle.remainingDuration);
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
// e.deliveryVehicle contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicle) {
console.log(e.deliveryVehicle.remainingDuration);
}
});
Auf Fehler warten
Fehler, die asynchron durch das Anfordern von Informationen zu Lieferfahrzeugen 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 der Standortanbieter das Paket nicht mehr verfolgen soll, entfernen Sie die vom Standortanbieter.
JavaScript
locationProvider.deliveryVehicleId = '';
TypeScript
locationProvider.deliveryVehicleId = '';
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);
Lieferflotte ansehen
In diesem Abschnitt wird beschrieben, wie Sie die Bibliothek für das Teilen von JavaScript-Recherchen verwenden um eine Lieferflotte anzuzeigen. Achten Sie darauf, Bibliothek aus der im Script-Tag angegebenen Callback-Funktion laden bevor Sie den Code ausführen.
Standortanbieter für Lieferflotten instanziieren
In der JavaScript-Flotten-Tracking-Bibliothek ist ein Standortanbieter vordefiniert, der mehrere Fahrzeuge aus der FleetEngine Deliveries API Verwenden Sie Ihr Projekt-ID und einen Verweis auf Ihren Token-Abruf, um ihn zu instanziieren.
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
deliveryVehicleFilter
gibt eine Abfrage zum Filtern von Fahrzeugen an, die auf
auf der Karte. Dieser Filter wird direkt an Fleet Engine übergeben. Weitere Informationen finden Sie unter
ListDeliveryVehiclesRequest.filter
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 Wert festgelegt wurde.
Sobald der Standortanbieter eingerichtet ist, die Kartenansicht initialisieren.
Standortbeschränkung mithilfe des Darstellungsbereichs der Karte festlegen
Die locationRestriction
-Grenzen können so konfiguriert werden, dass sie dem aktuellen Gebiet entsprechen.
die in der Kartenansicht sichtbar sind.
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 der deliveryVehicles
abrufen
mithilfe des Standortanbieters. Die Meta-Informationen enthalten Angaben zum Fahrzeug
Eigenschaften wie Navigationsstatus, verbleibende Entfernung und benutzerdefinierte Attribute;
Siehe
Referenzdokumentation
. 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.deliveryVehicles contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicles) {
for (vehicle of e.deliveryVehicles) {
console.log(vehicle.remainingDistanceMeters);
}
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineDeliveryFleetLocationProviderUpdateEvent) => {
// e.deliveryVehicles contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicles) {
for (vehicle of e.deliveryVehicles) {
console.log(vehicle.remainingDistanceMeters);
}
}
});
Auf Fehler warten
Fehler, die asynchron durch das Anfordern von Informationen zur Bereitstellungsflotte auftreten Fehlerereignisse auslösen. Beispiele für das Überwachen dieser Ereignisse finden Sie unter zu Auf Fehler warten.
Nicht mehr beobachten
Legen Sie Grenzen fest, um zu verhindern, dass der Standortanbieter die Lieferflotte verfolgt des Standortanbieters auf null setzen.
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);
Lieferfahrzeug verfolgen und Lieferflotte ansehen
In der Ansicht einer Flotte können Sie die Route und anstehende Aufgaben für eine bestimmte Lieferfahrzeugs. Instanziieren Sie dazu sowohl einen Standort der Lieferflotte Anbieter und Lieferunternehmen und fügen Sie beide der Kartenansicht:
JavaScript
deliveryFleetLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
deliveryVehicleLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher
});
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [
deliveryFleetLocationProvider,
deliveryVehicleLocationProvider,
],
// Any other options
});
TypeScript
deliveryFleetLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
deliveryVehicleLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher
});
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [
deliveryFleetLocationProvider,
deliveryVehicleLocationProvider,
],
// Any other options
});
Der Standortanbieter für Lieferflotten beginnt, Lieferfahrzeuge anzuzeigen auf auf der Karte. Anpassung von Markierungen verwenden, um den Standort des Lieferfahrzeugs zu aktivieren Anbieter, um ein Lieferfahrzeug zu verfolgen, wenn auf seine Flottenmarkierung geklickt wurde:
JavaScript
// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// params.vehicle.name follows the format
// "providers/{provider}/deliveryVehicles/{vehicleId}".
// Only the vehicleId portion is used for the delivery vehicle
// location provider.
deliveryVehicleLocationProvider.deliveryVehicleId =
params.vehicle.name.split('/').pop();
});
}
};
TypeScript
// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
(params: google.maps.journeySharing.DeliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// params.vehicle.name follows the format
// "providers/{provider}/deliveryVehicles/{vehicleId}".
// Only the vehicleId portion is used for the delivery vehicle
// location provider.
deliveryVehicleLocationProvider.deliveryVehicleId =
params.vehicle.name.split('/').pop();
});
}
};
Markierung vor dem Standortanbieter des Lieferfahrzeugs ausblenden, um das Rendern zu verhindern zwei Markierungen für dasselbe Fahrzeug:
JavaScript
// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.setVisible(false);
}
};
TypeScript
// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
(params: deliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.setVisible(false);
}
};
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 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. Bis
einen Stil auf Ihre JavaScript-Flotten-Tracking-Karte anwenden,
mapId
beim Erstellen der JourneySharingMapView
. 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'
}
});
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
, 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 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.
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 Flottenverfolgung Übergibt Daten an die Anpassungsfunktion für den Typ des Objekts, auf das sich die Markierung bezieht. steht für Fahrzeug, Haltestelle oder Aufgabe. Dadurch kann der Markierungsstil basierend auf dem aktuellen Status des Markierungselements selbst; zum Beispiel die Zahl der verbleibenden Haltestellen oder der Art der Aufgabe. Sie können sogar Daten aus Quellen zusammenführen außerhalb von Fleet Engine erstellen und die Markierung basierend auf diesen Informationen gestalten.
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.
FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter
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
Ein MarkerOptions
-Objekt. Folgen Sie diesem Muster, um den Stil eines beliebigen
Markierung mithilfe eines der oben aufgeführten Parameter zur Anpassung der Markierung.
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
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
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
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
deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
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
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};
Polylinienanpassungen verwenden, wenn Sie einem Lieferfahrzeug folgen
Mit der JavaScript-Flotten-Tracking-Bibliothek können Sie auch das Erscheinungsbild
der Route des Fahrzeugs 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 Fahrzeug ändern
state; Sie können z. B. das Polyline
-Objekt in einer dunkleren Schattierung einfärben oder
wird es dicker, wenn das Fahrzeug langsamer ist. Sie können sogar aus verschiedenen
Quellen außerhalb von Fleet Engine zu erstellen und das Polyline
-Objekt basierend darauf zu gestalten
Informationen.
Sie können die Anpassungen mithilfe der Parameter in den
FleetEngineDeliveryVehicleLocationProviderOptions
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 der Stil für eine aktive Polylinie konfiguriert wird
mithilfe einer Anpassungsfunktion. Folgen Sie diesem Muster, um die
Stil eines beliebigen Polyline
-Objekts unter Verwendung einer der Polylinien-Anpassungen
die zuvor aufgeführten Parameter.
JavaScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.deliveryVehicle.remainingDistanceMeters;
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: DeliveryVehiclePolylineCustomizationFunctionParams) => {
const distance = params.deliveryVehicle.remainingDistanceMeters;
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};
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.
Fahrzeugmarkierung hinzufügen.
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
if (e.deliveryVehicle) {
const distance =
e.deliveryVehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next task.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
}
});
// 3. Close the info window.
infoWindow.close();
TypeScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
if (e.deliveryVehicle) {
const distance =
e.deliveryVehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next task.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
}
});
// 3. Close the info window.
infoWindow.close();
Automatische Anpassung deaktivieren
Sie können verhindern, dass 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 Sie die automatische Anpassung beim Konfigurieren der Freigabe der Reise deaktivieren Kartenansicht.
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 Uluru
var uluru = {lat: -25.344, lng: 131.036};
// The map, initially centered at Mountain View, CA.
var map = new google.maps.Map(document.getElementById('map'));
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, now positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
}
</script>
<!-- Load the API from the specified URL.
* The async attribute allows the browser to render the page while the API loads.
* The key parameter will contain your own API key (which is not needed for this tutorial).
* The callback parameter executes the initMap() function.
-->
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
So fügen Sie die JavaScript-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 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
function authTokenFetcher(options) {
// options is a record containing two keys called
// serviceType and context. The developer should
// generate the correct SERVER_TOKEN_URL and request
// based on the values of these fields.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.Token,
expiresInSeconds: data.ExpiresInSeconds
};
}
// Initialize and add the map
function initMap() {
// (2) Initialize location provider. Use FleetEngineDeliveryVehicleLocationProvider
// as appropriate.
locationProvider = new google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProvider({
YOUR_PROVIDER_ID,
authTokenFetcher,
});
// (3) Initialize map view (which contains the map).
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map'),
locationProviders: [locationProvider],
// any styling options
});
mapView.addListener('ready', () => {
locationProvider.deliveryVehicleId = DELIVERY_VEHICLE_ID;
// (4) Add customizations like before.
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
// The map, initially centered at Mountain View, CA.
var map = mapView.map;
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, now positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
};
}
</script>
<!-- Load the API from the specified URL
* The async attribute allows the browser to render the page while the API loads
* The key parameter will contain your own API key (which is not needed for this tutorial)
* The callback parameter executes the initMap() function
*
* (5) Add the journey sharing library to the API loader, which includes Fleet Tracking functionality.
-->
<script defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
</script>
</body>
</html>
Wenn Sie ein Lieferfahrzeug mit der ID in der Nähe von Uluru angegeben haben, wird sie jetzt auf der Karte gerendert.