La libreria di monitoraggio della spedizione di JavaScript ti consente di visualizzare la posizione
di veicoli e luoghi di interesse monitorati su Fleet Engine. La biblioteca
contiene un componente della mappa JavaScript che sostituisce direttamente
per la connessione di un'entità google.maps.Map
standard e di componenti dati
con Fleet Engine. Utilizzando la libreria JavaScript per il monitoraggio della spedizione,
puoi fornire un'esperienza di monitoraggio della spedizione animata e personalizzabile dalla tua applicazione web.
Componenti
La libreria JavaScript per il monitoraggio della spedizione fornisce componenti per la visualizzazione del veicolo e del percorso mentre avanza verso una destinazione, nonché dati non elaborati feed per l'orario di arrivo stimato del conducente o per la distanza rimanente da percorrere.
Visualizzazione mappa del tracciamento della spedizione
Il componente Visualizzazione mappa mostra la posizione dei veicoli e delle destinazioni. Se il percorso per un veicolo è noto, il componente Visualizzazione mappa si anima del veicolo mentre si sposta lungo il percorso previsto.
Fornitore del luogo di spedizione
Un fornitore della località di spedizione fornisce le informazioni sulla posizione per gli oggetti tracciati nella mappa di monitoraggio della spedizione per monitorare la spedizione di primo e ultimo miglio.
Puoi utilizzare il fornitore della località di spedizione per tracciare:
- Il luogo di ritiro o consegna di una spedizione.
- La posizione e il percorso del veicolo per la consegna.
Oggetti posizione monitorati
Il fornitore della posizione monitora la posizione di oggetti come veicoli e destinazioni.
Località di destinazione
La località di destinazione è il luogo in cui termina un viaggio. Per la spedizione monitoraggio, è la posizione dell'attività pianificata.
Posizione del veicolo
La posizione del veicolo è la posizione monitorata di un veicolo. Potrebbe facoltativamente includi un percorso per il veicolo.
Recuperatore token di autenticazione
Per controllare l'accesso ai dati sulla posizione archiviati in Fleet Engine, devi implementare un servizio di minting JSON Web Token (JWT) per Fleet Engine sul tuo server. Poi implementa un fetcher di token di autenticazione come parte della tua applicazione web, utilizzando la libreria di condivisione del percorso JavaScript per autenticare l'accesso ai dati sulla posizione.
Opzioni di stile
Gli stili degli indicatori e delle polilinee determinano l'aspetto e il design del oggetti posizione monitorati sulla mappa. Puoi utilizzare opzioni di stile personalizzate per cambiare lo stile predefinito in modo che corrisponda allo stile della tua applicazione web.
Controlla la visibilità delle località monitorate
In questa sezione vengono descritti i controlli di visibilità per gli oggetti tracciati sulla mappa. Queste regole si applicano a due categorie di oggetti:
- Indicatore di posizione
- Dati attività
Visibilità degli indicatori di posizione
Tutti gli indicatori di posizione per l'origine e la destinazione sono sempre visualizzati sulla mappa. Ad esempio, una località di consegna di una spedizione viene sempre mostrata sulla mappa, a prescindere dallo stato del caricamento.
Visibilità dei dati dell'attività
Questa sezione descrive le regole di visibilità predefinite che si applicano ai dati delle attività. come la posizione del veicolo e il percorso rimanente. Puoi personalizzare molte attività, non tutti:
- Attività non disponibili : non puoi personalizzare la visibilità per queste attività.
- Attività attive del veicolo: puoi personalizzare questo tipo di attività.
- Attività del veicolo inattive: non puoi personalizzare la visibilità per queste attività.
Attività di indisponibilità
Se è presente almeno un'attività di indisponibilità (ad esempio, se il conducente sta facendo una pausa o il veicolo sta facendo rifornimento) lungo il percorso. all'attività monitorata, il veicolo non è visibile. L'arrivo stimato e il tempo stimato per il completamento delle attività sono ancora disponibili.
Attività attive del veicolo
La
TaskTrackingInfo
fornisce una serie di elementi di dati che possono essere resi visibili
Libreria di tracciamento delle spedizioni. Per impostazione predefinita, questi campi sono visibili quando l'attività viene
assegnato al veicolo e quando questo si trova entro 5 fermate dall'attività. La
la visibilità termina quando l'attività viene completata o annullata. I campi sono
che segue:
- Polilinee di percorso
- Tempo stimato all'arrivo
- Tempo stimato per il completamento dell'attività
- Distanza di guida rimanente dall'attività
- Numero di interruzioni rimanenti
- Posizione del veicolo
Puoi personalizzare la configurazione della visibilità in base all'attività impostando
il
TaskTrackingViewConfig
su un'attività quando la crei o la aggiorni in Fleet Engine. Questo crea
regole sulla disponibilità di singoli elementi di dati, che possono essere basati sul
seguenti criteri (indicata come opzione di visibilità di seguito):
- Numero di interruzioni rimanenti
- Durata fino all'ora di arrivo prevista
- Distanza di guida rimanente
- Sempre visibile
- Mai visibile
Tieni presente che ogni elemento dei dati può essere associato a una sola opzione di visibilità. Non è possibile combinare i criteri usando OR oppure AND.
Di seguito è riportato un esempio di personalizzazione. Le regole della personalizzazione sono:
- Mostra le polilinee del percorso se il veicolo si trova a meno di 3 fermate.
- Mostra l'orario di arrivo stimato se la distanza rimanente in auto è inferiore a 5000 metri.
- Non mostrare mai il numero di fermate rimanenti.
- Ogni altro campo mantiene la visibilità predefinita, ovvero quando viene visualizzato il veicolo si trova entro 5 fermate dall'attività.
"taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"estimatedArrivalTimeVisibility": {
"remainingDrivingDistanceMetersThreshold": 5000
},
"remainingStopCountVisibility": {
"never": true
}
}
Puoi anche personalizzare la configurazione di visibilità predefinita per il tuo progetto contattando il team di assistenza.
Polilinee del percorso e regole di visibilità della posizione dei veicoli:
Quando le polilinee del percorso sono visibili, deve essere visibile anche la posizione del veicolo, altrimenti la posizione del veicolo può essere indicata dalla fine delle polilinee. Questo significa che le polilinee non possono avere un'opzione di visibilità meno restrittiva.
È necessario seguire queste regole per fornire polilinee di percorso / veicolo validi combinazione di visibilità della posizione:
Quando le polilinee del percorso e la posizione del veicolo hanno la stessa opzione di visibilità tipo:
- Se l'opzione di visibilità è ancora il numero di fermate, la durata fino all'orario di arrivo stimato o distanza di guida rimanente, le polilinee del percorso devono fornire un valore inferiore uguale o uguale al valore impostato per questa opzione di visibilità per il veicolo in ogni località. Ecco un esempio:
"taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingStopCountThreshold": 5 }, }
- Se le polilinee del percorso hanno un'opzione di visibilità sempre visibile, la posizione del veicolo deve inoltre fornire un'opzione di visibilità sempre visibile.
- Se la posizione del veicolo ha un'opzione di visibilità non visibile, traccia il percorso delle polilinee Deve inoltre fornire un'opzione di visibilità non visibile.
Quando le polilinee del percorso e la posizione del veicolo hanno un'opzione di visibilità diversa , la posizione del veicolo è visibile solo quando entrambe le opzioni sono soddisfatte.
Ecco un esempio:
"taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingDrivingDistanceMetersThreshold": 3000 }, }
In questo esempio, la posizione del veicolo è visibile solo se la fermata rimanente il numero totale è di almeno 3 E la distanza di guida rimanente è di almeno 3000 metri.
Inizia a utilizzare la libreria di condivisione del percorso JavaScript
Prima di utilizzare la libreria di condivisione del percorso di JavaScript, assicurati di familiarità con Fleet Engine e per ottenere una chiave API.
Per monitorare una consegna, crea prima una rivendicazione dell'ID monitoraggio.
Crea una rivendicazione relativa all'ID monitoraggio
Per tracciare una spedizione utilizzando il fornitore della località di spedizione: crea un token JWT (JSON Web Token) con un'attestazione dell'ID monitoraggio.
Per creare il payload JWT, aggiungi un'altra dichiarazione nella sezione Autorizzazione con la chiave trackingid. Imposta il valore sull'ID monitoraggio della spedizione.
L'esempio seguente mostra come creare un token per il monitoraggio per ID di monitoraggio:
{
"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": {
"trackingid": "tid_54321",
}
}
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 JavaScript per il monitoraggio della spedizione 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 il monitoraggio della spedizione 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 una spedizione
Questa sezione mostra come utilizzare la libreria JavaScript per il tracciamento della spedizione di seguire un ritiro o una consegna della spedizione. Assicurati di carica la libreria dalla funzione callback specificata nel tag script prima di eseguire il codice.
Creare un'istanza per un fornitore della località di spedizione
La libreria JavaScript per il tracciamento della spedizione predefinisce automaticamente un fornitore della posizione per l'API Fleet Engine Deliveries. Utilizza l'ID progetto e un riferimento alla fabbrica di token per creare un'istanza.
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineShipmentLocationProvider({
projectId: 'your-project-id',
authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step
// Optionally, you may specify tracking ID to
// immediately start tracking.
trackingId: 'your-tracking-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineShipmentLocationProvider({
projectId: 'your-project-id',
authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step
// Optionally, you may specify tracking ID to
// immediately start tracking.
trackingId: 'your-tracking-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. Nell'esempio seguente, l'elemento <div> si chiama <div>.
Per evitare le condizioni di gara, imposta l'ID monitoraggio per il fornitore della posizione nel callback che viene richiamato dopo l'inizializzazione della mappa.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-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({
document.getElementById('map_canvas'),
locationProviders: [locationProvider],
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-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);
ID monitoraggio
L'ID monitoraggio fornito al fornitore della posizione può corrispondere a diverse le attività di machine learning; ad esempio un'attività di ritiro e consegna per lo stesso pacco oppure per diversi tentativi di recapito non riusciti. Viene selezionata un'attività da visualizzare nella mappa di monitoraggio della spedizione. L'attività da mostrare è determinata come segue:
- Viene visualizzata soltanto un'attività di ritiro aperta. Viene generato un errore se ci sono più attività di ritiro aperte.
- Viene mostrata l'indicazione se esiste esattamente un'attività di consegna aperta. Errore: vengono generate se ci sono più attività di consegna aperte.
- Se ci sono attività di consegna chiuse:
- Viene visualizzata se esiste esattamente un'attività di consegna chiusa.
- Se ci sono più attività di consegna chiuse, quella con la più recente viene mostrata l'ora dei risultati.
- Se sono presenti più attività di consegna chiuse, nessuna delle quali ha un risultato viene generato un errore.
- Se ci sono attività di ritiro chiuse:
- Se esiste esattamente un'attività di ritiro chiusa, viene visualizzata l'indicazione.
- Se ci sono più attività di ritiro chiuse, quella con la più recente viene mostrata l'ora dei risultati.
- Se sono presenti più attività di ritiro chiuse, nessuna delle quali ha un risultato viene generato un errore.
- In caso contrario, non viene visualizzata alcuna attività.
Ascolta gli eventi di modifica
Puoi recuperare le meta informazioni su un'attività dalle informazioni di monitoraggio dell'attività utilizzando il provider di localizzazione. Le meta informazioni includono l'orario di arrivo stimato, il numero di fermate rimanenti e la distanza rimanente prima del ritiro o della consegna. Le modifiche alle metadati attivano un evento update. Nell'esempio che segue mostra come ascoltare questi eventi di modifica.
JavaScript
locationProvider.addListener('update', e => {
// e.taskTrackingInfo contains data that may be useful
// to the rest of the UI.
console.log(e.taskTrackingInfo.remainingStopCount);
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
// e.taskTrackingInfo contains data that may be useful
// to the rest of the UI.
console.log(e.taskTrackingInfo.remainingStopCount);
});
Gestire gli errori
Vengono attivati gli errori che si verificano in modo asincrono in seguito alla richiesta dei dati di spedizione error. 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);
});
Nota: assicurati di aggregare le chiamate alla biblioteca in try...catch
blocchi
per gestire errori imprevisti.
Interrompi monitoraggio
Per impedire al fornitore della posizione di monitorare la spedizione, rimuovi l'ID monitoraggio del fornitore di servizi di localizzazione.
JavaScript
locationProvider.trackingId = '';
TypeScript
locationProvider.trackingId = '';
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);
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 modifiche al codice.
Gli stili di mappa vengono salvati come ID mappa nel progetto Cloud. Per applicare uno stile a
la tua mappa di monitoraggio della spedizione di JavaScript, specifica
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 ID mappa.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
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 JavaScript per il monitoraggio della spedizione, puoi personalizzare l'aspetto e degli indicatori aggiunti alla mappa. A tal fine, devi specificare l'indicatore personalizzate, che verranno applicate dalla libreria di tracciamento della spedizione prima di aggiungere gli indicatori sulla 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, la spedizione Il monitoraggio trasmette i dati alla funzione di personalizzazione del tipo di oggetto che l'indicatore rappresenta: veicolo o destinazione. In questo modo, lo stile degli indicatori cambia in base allo stato corrente dell'elemento indicatore stesso; ad esempio di tappe pianificate rimanenti fino alla destinazione. Puoi anche partecipare in base ai dati provenienti da origini esterne a Fleet Engine e definire lo stile dell'indicatore in base tali informazioni.
La libreria Monitoraggio della spedizione fornisce i seguenti parametri di personalizzazione in
FleetEngineShipmentLocationProviderOptions
:
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 una delle personalizzazioni degli indicatori sopra elencate.
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.taskTrackingInfo.remainingStopCount;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: ShipmentMarkerCustomizationFunctionParams) => {
const stopsLeft = params.taskTrackingInfo.remainingStopCount;
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: ShipmentMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
Utilizza personalizzazioni delle polilinee
Con la libreria di tracciamento della spedizione, puoi anche personalizzare l'aspetto e il design
il percorso della spedizione sulla mappa. La libreria crea un
google.maps.Polyline
per ciascuna coppia di coordinate nei
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 vengono creati
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 allo stato attuale di
la spedizione; ad esempio, colorare l'oggetto Polyline
con una tonalità più profonda oppure
rendendolo 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
FleetEngineShipmentLocationProviderOptions
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 uno
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 un oggetto Polyline
attivo
stili. Segui questo pattern per personalizzare lo stile di qualsiasi oggetto Polyline
utilizzando uno qualsiasi dei parametri di personalizzazione delle polilinee elencati in precedenza.
JavaScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
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: ShipmentPolylineCustomizationFunctionParams) => {
const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
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});
locationProvider.addListener('update', e => {
const stopsCount =
e.taskTrackingInfo.remainingStopCount;
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.FleetEngineShipmentLocationProviderUpdateEvent) => {
const stopsCount =
e.taskTrackingInfo.remainingStopCount;
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();
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
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
const stopsCount =
e.taskTrackingInfo.remainingStopCount;
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();
Sostituire una mappa esistente
Puoi utilizzare la libreria JavaScript per il monitoraggio della spedizione per 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:
- 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.
locationProvider = new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
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.trackingId = TRACKING_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.
-->
<script defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
</script>
</body>
</html>
Se hai un pacco monitorato con la specificato vicino a Uluru, ora verrà visualizzato sulla mappa.