La libreria di monitoraggio del parco risorse JavaScript ti consente di visualizzare le posizioni
dei veicoli nelle loro flotte quasi in tempo reale. La libreria utilizza
API Deliveries
per consentire la visualizzazione dei veicoli per la consegna e delle attività. Ad esempio
JavaScript Shipment Tracking Library (Libreria di monitoraggio della spedizione di JavaScript),
Contiene un componente mappa JavaScript che sostituisce direttamente
per la connessione di un'entità google.maps.Map standard e di componenti dati
con Fleet Engine.
Componenti
La libreria di monitoraggio del parco risorse JavaScript fornisce componenti per la visualizzazione di veicoli per la consegna e fermate, nonché feed di dati non elaborati per l'orario di arrivo stimato o le distanza da una consegna.
Visualizzazione mappa di Monitoraggio del parco risorse
Il componente Visualizzazione mappa di Monitoraggio parco risorse mostra la posizione dei veicoli e delle attività. Se il percorso per un veicolo è noto, il componente visualizzazione mappa anima quel veicolo mentre si sposta lungo il percorso previsto.
Fornitori di servizi di localizzazione
I provider di localizzazione utilizzano le informazioni memorizzate su Fleet Engine per inviare la posizione informazioni sugli oggetti monitorati nella mappa di condivisione del viaggio.
Fornitore della posizione del veicolo per la consegna
Il fornitore della posizione del veicolo per la consegna mostra i dati sulla posizione. Include informazioni sulla posizione del veicolo, attività completate dal veicolo per le consegne.
Fornitore di sedi della flotta di consegna
Il fornitore della posizione della flotta di consegna mostra più veicoli posizione informazioni. Puoi filtrare in base a veicoli o luoghi specifici oppure mostrare all'intera flotta.
Controlla la visibilità delle località monitorate
Questa sezione descrive le regole di visibilità per gli oggetti posizione monitorati sulla mappa per il provider di localizzazione predefinito di Fleet Engine. Personalizzato o derivato i fornitori di sedi possono modificare le regole di visibilità.
Veicoli per la consegna
Un veicolo per le consegne è visibile non appena viene creato in Fleet Engine. ed è visibile lungo tutto il percorso, indipendentemente dalle sue attività.
Indicatori di posizione delle attività
Le fermate previste per i veicoli vengono mostrate sulla mappa come indicatori delle fermate. Indicatori per le attività completate vengono visualizzate con uno stile diverso rispetto a quello fermate pianificate.
La posizione dei risultati delle attività viene visualizzata con indicatori dei risultati delle attività. Le attività con risultato SUPERATO sono visualizzate con indicatori di attività riuscite, mentre tutte le altre sono visualizzate con indicatori non riusciti.
Inizia a utilizzare la libreria di monitoraggio del parco risorse JavaScript
Prima di utilizzare la libreria di monitoraggio del parco risorse JavaScript, assicurati di familiarità con Fleet Engine e per ottenere una chiave API. Quindi crea un ID attività e una rivendicazione dell'ID del veicolo per la consegna.
Crea un ID attività e una rivendicazione dell'ID del veicolo per la consegna
Per monitorare i veicoli per la consegna utilizzando il fornitore della posizione del veicolo per la consegna, Creare un token JWT (JSON Web Token) con un ID attività e un'attestazione dell'ID del veicolo di consegna.
Per creare il payload JWT, aggiungi un'altra dichiarazione nella sezione Autorizzazione con le chiavi taskid e deliveryvehicleid e imposta il valore di ogni chiave in *. Il token deve essere creato utilizzando il cluster Fleet Engine Ruolo Cloud IAM Service Super User. Tieni presente che concede accesso ampio per creare, leggere e modificare le entità Fleet Engine e deve essere condiviso con utenti attendibili.
L'esempio seguente mostra come creare un token per il monitoraggio in base al veicolo e l'attività:
{
"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": "*",
}
}
Crea un fetcher di token di autenticazione
Puoi creare un fetcher di token di autenticazione per recuperare un token creato da te con le rivendicazioni appropriate sui tuoi server che utilizzano un servizio certificato dell'account di servizio per il tuo progetto. È importante eseguire il mint solo dei token sui tuoi server e non condividere mai i tuoi certificati su nessun client. Altrimenti, comprometterai la sicurezza del sistema.
Il fetcher deve restituire una struttura di dati con due campi, avvolti in una promessa:
- Una stringa
token. - Un numero
expiresInSeconds. Un token scade in questo periodo di tempo dopo recupero.
La libreria di monitoraggio del parco risorse JavaScript richiede un token tramite l'autenticazione di recupero dei token quando una delle seguenti condizioni è vera:
- Non ha un token valido, ad esempio se non ha chiamato il fetcher su un nuovo caricamento di pagina o quando il fetcher non ha restituito un token.
- Il token recuperato in precedenza è scaduto.
- Il token recuperato in precedenza scade un minuto dopo la scadenza.
In caso contrario, la libreria utilizza il token ancora valido emesso in precedenza e non chiamare il fetcher.
L'esempio seguente mostra come creare un fetcher di token di autenticazione:
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(),
};
}
Quando implementi l'endpoint lato server per il mining dei token, mantieni tieni presente quanto segue:
- L'endpoint deve restituire una data di scadenza per il token. nell'esempio
in alto, viene specificato come
data.ExpiresInSeconds. - Il fetcher del token di autenticazione deve superare la data di scadenza (in secondi, dal recupero) alla libreria, come mostrato nell'esempio.
- SERVER_TOKEN_URL dipende dall'implementazione del backend, ovvero gli URL del backend dell'app di esempio:
- .
- https://
SERVER_URL/token/delivery_driver/DELIVERY_VEHICLE_ID - https://
SERVER_URL/token/delivery_consumer/TRACKING_ID - https://
SERVER_URL/token/fleet_reader
- https://
Carica una mappa da HTML
L'esempio seguente mostra come caricare la condivisione del percorso JavaScript
libreria da un URL specificato. Il parametro callback esegue initMap
dopo il caricamento dell'API. L'attributo defer consente al browser
continuare a visualizzare il resto della pagina durante il caricamento dell'API.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
Seguire un veicolo per le consegne
Questa sezione mostra come utilizzare la libreria di monitoraggio del parco risorse JavaScript di seguire un veicolo per la consegna. Assicurati di carica la libreria dalla funzione callback specificata nel tag script prima di eseguire il codice.
Creare un'istanza per un fornitore di servizi di localizzazione di un veicolo per la consegna
La libreria di monitoraggio del parco risorse JavaScript predefinisce un provider di posizione per l'API Fleet Engine Deliveries. Utilizza l'ID progetto e un riferimento alla tua fabbrica di token per crearla.
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',
});
Inizializzare la visualizzazione mappa
Dopo aver caricato la libreria di condivisione del percorso JavaScript, inizializzala la visualizzazione mappa e aggiungerla alla pagina HTML. La pagina deve contenere Un elemento <div> contenente la visualizzazione mappa. L'elemento <div> è denominato map_canvas nell'esempio riportato di seguito.
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);
Ascolta gli eventi di modifica
Puoi recuperare le meta informazioni su un'attività dall'oggetto deliveryVehicle
utilizzando il fornitore di servizi di localizzazione. Le meta informazioni includono l'orario di arrivo stimato e
distanza rimanente prima del successivo ritiro o consegna del veicolo. Modifiche
alle meta informazioni che attivano un evento update. Nell'esempio che segue
mostra come ascoltare questi eventi di modifica.
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);
}
});
Monitora gli errori
Attivatore di errori che si verificano in modo asincrono in seguito alla richiesta di informazioni sul veicolo per la consegna e gli eventi di errore. L'esempio seguente mostra come ascoltare questi eventi per gestire gli errori.
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);
});
Interrompi monitoraggio
Per impedire al fornitore della posizione di monitorare il veicolo per la consegna, rimuovi il ID del veicolo per la consegna del fornitore della posizione.
JavaScript
locationProvider.deliveryVehicleId = '';
TypeScript
locationProvider.deliveryVehicleId = '';
Rimuovere il fornitore di posizione dalla visualizzazione mappa
L'esempio seguente mostra come rimuovere un fornitore di posizione dalla visualizzazione mappa.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
Visualizza un parco risorse di consegna
Questa sezione mostra come utilizzare la libreria di condivisione del percorso di JavaScript per visualizzare un parco risorse di consegna. Assicurati di carica la libreria dalla funzione callback specificata nel tag script prima di eseguire il codice.
Creare un'istanza per un fornitore di servizi di localizzazione di un parco risorse
La libreria di monitoraggio del parco risorse JavaScript predefinisce un provider di posizione che recupera più veicoli API FleetEngine Deliveries. Utilizza il tuo dell'ID progetto e un riferimento al fetcher di token per creare un'istanza.
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 specifica una query utilizzata per filtrare i veicoli visualizzati su
la mappa. Questo filtro viene passato direttamente a Fleet Engine. Consulta
ListDeliveryVehiclesRequest.filter
per i formati supportati.
locationRestriction limita l'area in cui visualizzare i veicoli sulla mappa.
e controlla se il monitoraggio della posizione è attivo o meno. Monitoraggio posizione
non inizierà finché non sarà impostata.
Una volta creato il provider di località, inizializzare la visualizzazione mappa.
Impostare la limitazione di località usando l'area visibile della mappa
I limiti di locationRestriction possono essere configurati in modo che corrispondano all'area attualmente
visibile nella visualizzazione mappa.
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;
}
});
Ascolta gli eventi di modifica
Puoi recuperare le meta informazioni sul parco risorse dal deliveryVehicles
utilizzando il provider di localizzazione. Le meta informazioni includono il veicolo
proprietà come stato di navigazione, distanza rimanente e attributi personalizzati;
vedi
documentazione di riferimento
per ulteriori dettagli. La modifica delle metadati attiva un evento update. La
l'esempio seguente mostra come ascoltare questi eventi di modifica.
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);
}
}
});
Monitora gli errori
Errori che si verificano in modo asincrono in seguito alla richiesta di informazioni sul parco risorse di consegna attivare eventi di errore. Per esempi che mostrano come ascoltare questi eventi, consulta fino all'articolo Attendi gli errori.
Interrompi monitoraggio
Imposta i limiti per impedire al fornitore di posizione di monitorare il parco risorse di consegna del provider di località su null.
JavaScript
locationProvider.locationRestriction = null;
TypeScript
locationProvider.locationRestriction = null;
Rimuovere il fornitore di posizione dalla visualizzazione mappa
L'esempio seguente mostra come rimuovere un fornitore di posizione dalla visualizzazione mappa.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
Tracciare un veicolo per la consegna mentre visualizzi una flotta di consegna
Mentre visualizzi un parco risorse, puoi mostrare il percorso e le prossime attività per una flotta specifica un veicolo per le consegne. Per farlo, crea un'istanza per una località del parco risorse fornitore e un fornitore di servizi di localizzazione dei veicoli per la consegna e aggiungili entrambi al visualizzazione mappa:
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
});
Il fornitore della sede della flotta di consegna inizia a mostrare i veicoli per la consegna su la mappa. Utilizza la personalizzazione degli indicatori per attivare la posizione del veicolo per la consegna il fornitore di monitorare un veicolo per la consegna quando ha fatto clic sull'indicatore della flotta:
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();
});
}
};
Nascondi l'indicatore al fornitore della posizione del veicolo per la consegna per impedire il rendering due indicatori per lo stesso veicolo:
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);
}
};
Personalizza l'aspetto della mappa base
Per personalizzare l'aspetto del componente Maps: applicare uno stile alla mappa utilizzando strumenti basati su cloud o impostando le opzioni direttamente nel codice.
Utilizza la personalizzazione delle mappe basata su cloud
Personalizzazione delle mappe basata su cloud
ti consente di creare e modificare gli stili di mappa per tutte le tue app che utilizzano Google Maps
dalla console Google Cloud senza richiedere alcuna modifica al codice.
Gli stili di mappa vengono salvati come ID mappa nel progetto Cloud. A
applicare uno stile alla mappa di monitoraggio del parco risorse JavaScript, specificare un
mapId
quando crei JourneySharingMapView. Impossibile modificare il campo mapId
o aggiunti dopo l'istanza di JourneySharingMapView. Le seguenti
mostra come attivare uno stile di mappa creato in precedenza con un
l'ID mappa.
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'
}
});
Utilizza lo stile delle mappe basato su codice
Un altro modo per personalizzare
lo stile della mappa è impostare
mapOptions quando
crea il JourneySharingMapView.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
Utilizzare le personalizzazioni degli indicatori
Con la libreria di monitoraggio del parco risorse JavaScript puoi personalizzare l'aspetto di indicatori aggiunti alla mappa. A questo scopo, devi specificare le personalizzazioni degli indicatori, che viene poi applicata dalla Fleet Tracking Library prima di aggiungere indicatori alla mappa. e a ogni aggiornamento degli indicatori.
La personalizzazione più semplice consiste nello specificare
MarkerOptions
che verrà applicato a tutti gli indicatori dello stesso tipo. Le modifiche
specificati nell'oggetto vengono applicati
dopo la creazione di ciascun indicatore,
sovrascrivendo le opzioni predefinite.
Un'opzione più avanzata è specificare una funzione di personalizzazione. Personalizzazione consentono di definire lo stile degli indicatori in base ai dati, nonché di aggiungere Interattività con gli indicatori, come la gestione dei clic. Nello specifico, il monitoraggio della flotta passa i dati alla funzione di personalizzazione circa il tipo di oggetto dell'indicatore rappresenta: veicolo, fermata o attività. Per modificare lo stile degli indicatori, in base allo stato corrente dell'elemento indicatore stesso; ad esempio il numero di fermate rimanenti o tipo di attività. Puoi anche eseguire l'unione con i dati provenienti da origini all'esterno di Fleet Engine e definire lo stile dell'indicatore in base a queste informazioni.
Inoltre, puoi utilizzare le funzioni di personalizzazione per filtrare la visibilità degli indicatori.
A questo scopo, chiama
setVisible(false)
sull'indicatore.
Tuttavia, ai fini delle prestazioni, ti consigliamo di filtrare con il formato nativo
i filtri nel provider di localizzazione, ad esempio
FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter
Detto questo, quando hai bisogno di ulteriori funzionalità di filtro, puoi applicare
usando la funzione di personalizzazione.
La libreria Monitoraggio parco risorse fornisce i seguenti parametri di personalizzazione:
Modifica lo stile degli indicatori utilizzando MarkerOptions
L'esempio seguente mostra come configurare lo stile degli indicatori di veicoli con
un oggetto MarkerOptions. Segui questo schema per personalizzare lo stile di
utilizzando uno dei parametri di personalizzazione degli indicatori sopra elencati.
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
Modificare lo stile degli indicatori utilizzando le funzioni di personalizzazione
L'esempio seguente mostra come configurare lo stile degli indicatori di veicoli. Segui questo pattern per personalizzare lo stile di qualsiasi indicatore parametri di personalizzazione elencati sopra.
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}`);
};
Aggiungi gestione dei clic agli indicatori
L'esempio seguente mostra come aggiungere la gestione dei clic a un indicatore di veicolo. Segui questo schema per aggiungere la gestione dei clic a qualsiasi indicatore utilizzando uno degli indicatori parametri di personalizzazione elencati sopra.
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.
});
}
};
Filtra gli indicatori visibili
L'esempio seguente mostra come filtrare gli indicatori di veicoli visibili. Segui questo pattern per filtrare tutti gli indicatori utilizzando una delle opzioni di personalizzazione parametri sopra elencati.
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);
}
};
Utilizzare le personalizzazioni delle polilinee quando segui un veicolo per le consegne
Con la libreria di monitoraggio del parco risorse JavaScript, puoi anche personalizzare l'aspetto e
la percezione del percorso del veicolo seguito sulla mappa. La libreria crea un
google.maps.Polyline
per ogni coppia di coordinate nello stato attivo o rimanente del veicolo
percorso.
Puoi definire lo stile degli oggetti Polyline specificando le personalizzazioni delle polilinee. La
libreria, poi applica queste personalizzazioni in due situazioni: prima di aggiungere
oggetti alla mappa e quando i dati utilizzati per gli oggetti sono cambiati.
Come per la personalizzazione degli indicatori, puoi specificare
PolylineOptions
da applicare a tutti gli oggetti Polyline corrispondenti quando
creato o aggiornato.
Analogamente, puoi specificare una funzione di personalizzazione. Funzioni di personalizzazione
consente di assegnare uno stile individuale agli oggetti in base ai dati inviati da Fleet Engine.
La funzione può modificare lo stile di ciascun oggetto in base al veicolo corrente
stato; ad esempio per colorare l'oggetto Polyline con una tonalità più profonda o per rendere
diventa più spesso quando il veicolo è più lento. Puoi partecipare anche da
origini esterne a Fleet Engine e definire lo stile dell'oggetto Polyline in base a questo
informazioni.
Puoi specificare le personalizzazioni utilizzando i parametri forniti in
FleetEngineDeliveryVehicleLocationProviderOptions
Puoi impostare personalizzazioni per diversi stati del percorso nel veicolo
viaggio: già viaggiato, in viaggio attivo o non ancora viaggiato. La
sono i seguenti:
takenPolylineCustomization, per un percorso già percorso;activePolylineCustomization, per un percorso in viaggio attivo;remainingPolylineCustomization, per un percorso non ancora seguito.
Modifica lo stile di Polyline oggetti utilizzando PolylineOptions
L'esempio seguente mostra come configurare lo stile per un oggetto Polyline
con
PolylineOptions
Segui questo pattern per personalizzare lo stile di qualsiasi oggetto Polyline usando qualsiasi
delle personalizzazioni delle polilinee elencate in precedenza.
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
Modifica lo stile di Polyline oggetti utilizzando le funzioni di personalizzazione
L'esempio seguente mostra come configurare lo stile per una polilinea attiva
utilizzando una funzione di personalizzazione. Segui questo schema per personalizzare
stili di qualsiasi oggetto Polyline mediante una qualsiasi delle opzioni di personalizzazione delle polilinee
parametri elencati in precedenza.
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'});
}
}
};
Controlla la visibilità di Polyline oggetti
Per impostazione predefinita, tutti gli oggetti Polyline sono visibili. Per creare un oggetto Polyline
invisibile, imposta
visible
proprietà:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
Mostra un InfoWindow per un veicolo o un indicatore di posizione
Puoi utilizzare una InfoWindow
per mostrare informazioni aggiuntive su un veicolo o un indicatore di posizione.
L'esempio seguente mostra come creare un InfoWindow e collegarlo
a un indicatore di veicolo.
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();
Disattiva adattamento automatico
Puoi impedire alla mappa di adattarsi automaticamente all'area visibile al veicolo e il percorso previsto disattivando il montaggio automatico. Nell'esempio che segue mostra come disattivare l'adattamento automatico quando configuri la condivisione del percorso visualizzazione mappa.
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,
...
});
Sostituire una mappa esistente
Puoi sostituire una mappa esistente che include indicatori o altre personalizzazioni senza perdere le personalizzazioni.
Ad esempio, supponiamo che tu abbia una pagina web con un google.maps.Map standard
entità su cui viene visualizzato un indicatore:
<!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>
Per aggiungere la libreria di condivisione del percorso JavaScript, che include il monitoraggio del parco risorse:
- Aggiungi il codice per la fabbrica del token di autenticazione.
- Inizializza un provider di località nella funzione
initMap(). - Inizializza la visualizzazione mappa nella funzione
initMap(). La visualizzazione contiene la mappa. - Sposta la personalizzazione nella funzione di callback per l'inizializzazione della visualizzazione mappa.
- Aggiungi la libreria di località al caricatore API.
L'esempio seguente mostra le modifiche da apportare:
<!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>
Se utilizzi un veicolo per la consegna con specificato vicino a Uluru, ora verrà visualizzato sulla mappa.