La libreria di monitoraggio del parco risorse JavaScript ti consente di visualizzare le posizioni
dei veicoli delle tue flotte quasi in tempo reale. La raccolta utilizza il pulsante On Demand
Trasporto passeggeri e consegne
tramite Google Cloud
per consentire la visualizzazione
dei veicoli e delle corse. Il parco risorse JavaScript
La libreria di monitoraggio contiene un componente mappa JavaScript che è un drop-in
sostituzione di un'entità google.maps.Map
standard e componenti dati per
connettersi a Fleet Engine.
Componenti
La libreria di monitoraggio del parco risorse JavaScript fornisce componenti per la visualizzazione veicoli e tappe di viaggio, nonché feed di dati non elaborati per ETA o rimanenti distanza da un percorso.
Visualizzazione mappa di Monitoraggio del parco risorse
Il componente di visualizzazione mappa di tracciamento della flotta mostra la posizione dei veicoli e le tappe del viaggio. Se il percorso per un veicolo è noto, il componente Visualizzazione mappa anima il 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 di servizi di localizzazione dei veicoli
Il fornitore della posizione del veicolo mostra le informazioni sulla posizione di un singolo veicolo. Contiene informazioni sulla posizione del veicolo e sulla corsa corrente assegnate al veicolo.
Fornitore di posizione del parco risorse
Il fornitore della posizione della flotta mostra le informazioni sulla posizione per più veicoli. Puoi applicare un filtro per visualizzare un veicolo specifico e la sua posizione oppure mostrare le posizioni dei veicoli per l'intero parco dispositivi.
Controlla la visibilità delle località monitorate
Le regole di visibilità determinano quando un oggetto posizione monitorato è visibile sulla mappa per un provider di localizzazione di Fleet Engine. Nota: utilizzo di una località personalizzata o derivata provider può modificare le regole di visibilità.
Veicoli
Un veicolo è visibile non appena viene creato in Fleet Engine ed è visibile
quando il valore è Online
. Ciò significa che un veicolo può essere visibile anche
quando non è presente alcuna corsa assegnata al veicolo.
Indicatori di posizione dei waypoint
L'indicatore di posizione di una tappa indica i punti lungo il percorso di partenza di un veicolo che termina con la destinazione finale. La posizione della tappa gli indicatori possono essere definiti come segue:
- Origine: indica il luogo di partenza della corsa con il veicolo.
- Intermedio: indica i punti di sosta per la corsa con il veicolo.
- Destinazione: indica la posizione finale della corsa con il veicolo.
Le tappe pianificate dei veicoli vengono mostrate sulla mappa come punto di partenza, intermedio e gli indicatori di destinazione.
Inizia a utilizzare la libreria di monitoraggio del parco risorse JavaScript
Prima di utilizzare la libreria di monitoraggio del parco risorse JavaScript, assicurati di acquisire familiarità con Fleet Engine e ottenere un'API chiave. Crea quindi un ID corsa e una rivendicazione dell'ID veicolo.
Creare una rivendicazione relativa all'ID corsa e all'ID veicolo
Per monitorare i veicoli utilizzando la posizione del veicolo provider, crea un token JWT (JSON Web Token) con un percorso Rivendicazione dell'ID e dell'ID veicolo.
Per creare il payload JWT, aggiungi un'altra dichiarazione nella sezione Autorizzazione
con i tasti tripid
e vehicleid
e imposta value
di ogni tasto su *.
Il token deve essere creato utilizzando il cloud Super User del servizio Fleet Engine
ruolo IAM. Tieni presente che concede accesso ampio per creare, leggere e modificare il parco risorse
le entità del motore di ricerca e devono essere condivise solo con utenti attendibili.
L'esempio seguente mostra come creare un token per il monitoraggio per veicolo e 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": {
"tripid": "*",
"vehicleid": "*",
}
}
Crea un fetcher di token di autenticazione
La libreria di monitoraggio del parco risorse JavaScript richiede un token utilizzando il metodo di autenticazione il fetcher di 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.
Puoi creare un fetcher di token di autenticazione per recuperare un token creato con le rivendicazioni appropriate sui tuoi server che utilizzano un account di servizio per il tuo progetto. È importante creare token solo sul tuo senza dover mai condividere i certificati sui client. In caso contrario, compromettere la sicurezza del sistema.
Il fetcher deve restituire i dati strutturale con due campi, avvolti in una promessa:
- Una stringa
token
. - Un numero
expiresInSeconds
. Un token scade in questo periodo di tempo dopo recupero.
L'esempio seguente mostra come creare un fetcher di token di autenticazione:
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
};
}
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 precedente,
viene specificato come
data.ExpiresInSeconds
. - Il fetcher del token di autenticazione deve superare la data di scadenza (in secondi, da del recupero) nella libreria, come mostrato nell'esempio.
- SERVER_TOKEN_URL dipende dall'implementazione del backend e sono
URL di esempio:
- https://
SERVER_URL
/token/driver/VEHICLE_ID
- https://
SERVER_URL
/token/consumer/TRIP_ID
- https://
SERVER_URL
/token/fleet_reader
- https://
Carica una mappa da HTML
L'esempio seguente mostra come caricare la libreria di condivisione del percorso JavaScript
da un URL specificato. Il parametro callback esegue la funzione initMap
dopo il caricamento dell'API. L'attributo defer consente al browser di continuare il rendering.
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&v=beta" defer></script>
Seguire un veicolo
Questa sezione mostra come utilizzare la libreria di monitoraggio del parco risorse JavaScript per seguire una veicolo. Assicurati di caricare la libreria dalla funzione di callback specificata in il tag script prima di eseguire il codice.
Creare un'istanza per un fornitore di servizi di localizzazione del veicolo
La libreria di monitoraggio del parco risorse JavaScript predefinisce un provider di posizione per l'opzione On API Demand Rides and Deliveries. Utilizza l'ID progetto e un riferimento ai tuoi di token di archiviazione per creare un'istanza.
locationProvider =
new google.maps.journeySharing
.FleetEngineVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// vehicleId to immediately start
// tracking.
vehicleId: 'your-vehicle-id',
});
locationProvider =
new google.maps.journeySharing
.FleetEngineVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// vehicleId to immediately start
// tracking.
vehicleId: 'your-vehicle-id',
});
Inizializzare la visualizzazione mappa
Dopo aver caricato la libreria di condivisione del percorso JavaScript, inizializza la visualizzazione mappa e aggiungerla alla pagina HTML. La pagina deve contenere un elemento <div> che contiene la visualizzazione mappa. L'elemento <div> viene denominato <div> nella di esempio qui sotto.
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 vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
= 'your-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);
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId = 'your-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 veicolo dall'oggetto vehicle
utilizzando il fornitore di servizi di localizzazione. Le meta informazioni includono l'orario di arrivo stimato e le rimanenti
distanza prima del successivo ritiro o consegna del veicolo. Modifiche al meta
informazioni attivano un evento update. L'esempio seguente mostra come ascoltare
a questi eventi di modifica.
locationProvider.addListener('update', e => {
// e.vehicle contains data that may be
// useful to the rest of the UI.
if (e.vehicle) {
console.log(e.vehicle.vehicleState);
}
});
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
// e.vehicle contains data that may be useful to the rest of the UI.
if (e.vehicle) {
console.log(e.vehicle.vehicleState);
}
});
Monitora gli errori
Errori che si verificano in modo asincrono in seguito alla richiesta di informazioni sul veicolo e gli eventi di errore. L'esempio seguente mostra come ascoltare questi eventi in per gestire gli errori.
locationProvider.addListener('error', e => {
// e.error is the error that triggered the event.
console.error(e.error);
});
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 di posizione di monitorare il veicolo, rimuovi l'ID veicolo del fornitore di servizi di localizzazione.
locationProvider.vehicleId = '';
locationProvider.vehicleId = '';
Rimuovere il fornitore di posizione dalla visualizzazione mappa
L'esempio seguente mostra come rimuovere un fornitore di posizione dalla visualizzazione mappa.
mapView.removeLocationProvider(locationProvider);
mapView.removeLocationProvider(locationProvider);
Visualizzare un parco veicoli
Questa sezione mostra come utilizzare la libreria di condivisione del percorso di JavaScript per visualizzare un parco veicoli. Assicurati di caricare la libreria dalla funzione di callback specificato nel tag script prima di eseguire il codice.
Creare un'istanza per un fornitore di servizi di localizzazione della flotta di veicoli
La libreria di monitoraggio del parco risorse JavaScript definisce preventivamente un fornitore di posizione che recupera più veicoli dall'API On Demand Rides and Deliveries. Utilizza il tuo dell'ID progetto e un riferimento al fetcher di token per crearlo.
locationProvider =
new google.maps.journeySharing
.FleetEngineFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which 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 vehicles are retrieved.
vehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
locationProvider =
new google.maps.journeySharing
.FleetEngineFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which 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 vehicles are retrieved.
vehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
vehicleFilter
specifica una query utilizzata per filtrare i veicoli visualizzati sulla mappa.
Questo filtro viene passato direttamente a Fleet Engine. Consulta
ListVehiclesRequest
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à, inizializza la mappa vista.
Impostare la limitazione di località usando l'area visibile della mappa
I limiti di locationRestriction
possono essere configurati in modo che corrispondano all'area visibile in
la visualizzazione mappa.
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;
}
});
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 dall'oggetto vehicles
utilizzando il fornitore di servizi di localizzazione. Le meta informazioni includono le proprietà del veicolo
come stato della navigazione, distanza dal waypoint successivo e attributi personalizzati; vedi
riferimento
documentazione
per ulteriori dettagli. La modifica delle metadati attiva un evento di aggiornamento. La
l'esempio seguente mostra come ascoltare questi eventi di modifica.
locationProvider.addListener('update', e => {
// e.vehicles contains data that may be
// useful to the rest of the UI.
if (e.vehicles) {
for (vehicle of e.vehicles) {
console.log(vehicle.navigationStatus);
}
}
});
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineFleetLocationProviderUpdateEvent) => {
// e.vehicles contains data that may be useful to the rest of the UI.
if (e.vehicles) {
for (vehicle of e.vehicles) {
console.log(vehicle.navigationStatus);
}
}
});
Monitora gli errori
Errori che si verificano in modo asincrono in seguito alla richiesta di informazioni sul parco veicoli attivare eventi di errore. Per esempi che mostrano come ascoltare questi eventi, consulta fino all'articolo Attendi gli errori.
Interrompi monitoraggio
Per impedire al fornitore di posizione di monitorare il parco risorse, imposta i limiti del il provider di localizzazione su null.
locationProvider.locationRestriction = null;
locationProvider.locationRestriction = null;
Rimuovere il fornitore di posizione dalla visualizzazione mappa
L'esempio seguente mostra come rimuovere un fornitore di posizione dalla visualizzazione mappa.
mapView.removeLocationProvider(locationProvider);
mapView.removeLocationProvider(locationProvider);
Personalizza l'aspetto della mappa base
Per personalizzare l'aspetto del componente Maps, assegna uno stile alla tua utilizzando 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. La
Gli stili di mappa vengono salvati come ID mappa nel tuo progetto Cloud. Per applicare uno stile ai tuoi
mappa di monitoraggio parco risorse JavaScript, specifica 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 ID mappa.
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
});
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 crei JourneySharingMapView
.
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
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.
Puoi creare una semplice personalizzazione specificando un
MarkerOptions
da applicare a tutti gli indicatori dello stesso tipo. Le modifiche specificate nel
vengono applicati dopo la creazione di ciascun indicatore, sovrascrivendo qualsiasi valore predefinito
le opzioni di CPU e memoria disponibili.
Come opzione più avanzata, puoi specificare una funzione di personalizzazione. Le funzioni di personalizzazione consentono di definire gli stili degli indicatori in base ai dati, nonché come l'aggiunta di interattività agli indicatori, come la gestione dei clic. Nello specifico, parco risorse Il monitoraggio trasmette i dati alla funzione di personalizzazione del tipo di oggetto che l'indicatore rappresenta: veicolo, fermata o attività. In questo modo, lo stile degli indicatori cambia in base allo stato corrente dell'elemento indicatore stesso; ad esempio il numero di fermate rimanenti o il tipo di attività. Puoi anche eseguire l'unione con i dati origini esterne a 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
FleetEngineFleetLocationProvider.vehicleFilter
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
MarkerOptions
oggetto. Segui questo schema per personalizzare lo stile di
utilizzando uno dei parametri di personalizzazione degli indicatori sopra elencati.
vehicleMarkerCustomization = {
cursor: 'grab'
};
vehicleMarkerCustomization = {
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.
vehicleMarkerCustomization =
(params) => {
var remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
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.
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
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.
vehicleMarkerCustomization =
(params) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
Utilizza le personalizzazioni delle polilinee quando segui un veicolo
Con la libreria di tracciamento del parco risorse, puoi anche personalizzare l'aspetto
il 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 allo stato attuale di
dal veicolo; ad esempio, colorare l'oggetto Polyline
con una tonalità più profonda oppure
rendendolo più spesso quando il veicolo è più lento. Puoi anche partecipare
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
FleetEngineVehicleLocationProviderOptions
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.
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
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 dei parametri di personalizzazione delle polilinee elencati in precedenza.
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.vehicle.waypoints[0].distanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params: VehiclePolylineCustomizationFunctionParams) => {
const distance = params.vehicle.waypoints[0].distanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
Controlla la visibilità di Polyline
oggetti
Per impostazione predefinita, tutti gli oggetti Polyline
sono visibili. Per creare un oggetto Polyline
invisibile, imposta
visible
proprietà:
remainingPolylineCustomization = {visible: false};
remainingPolylineCustomization = {visible: false};
Esegui il rendering degli oggetti Polyline
sensibili al traffico
Fleet Engine restituisce i dati sulla velocità del traffico per i percorsi attivi e rimanenti per
il veicolo seguito. Puoi usare queste informazioni per definire lo stile di Polyline
a seconda della velocità del traffico:
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params) => {
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params: VehiclePolylineCustomizationFunctionParams) => {
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
Mostra un InfoWindow
per un veicolo o un indicatore di posizione
Puoi utilizzare un
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 veicoli.
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
if (e.vehicle) {
const distance =
e.vehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next drop-off point.`);
// 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();
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
if (e.vehicle) {
const distance =
e.vehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next drop-off.`);
// 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 previsto disattivando il montaggio automatico. L'esempio seguente mostra come disattivare l'adattamento automatico quando configuri la mappa di condivisione del percorso vista.
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
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 Oracle Park Stadium
var oraclePark = { lat: 37.780087547237365, lng: -122.38948437884427 };,
// 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 Oracle Park
var marker = new google.maps.Marker({ position: oraclePark, 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 vista contiene mappa. - Sposta la personalizzazione nella funzione di callback per la visualizzazione mappa durante l'inizializzazione.
- 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 FleetEngineVehicleLocationProvider
// as appropriate.
locationProvider = new google.maps.journeySharing.FleetEngineVehicleLocationProvider({
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.vehicleId = VEHICLE_ID;
// (4) Add customizations like before.
// The location of Oracle Park
var oraclePark = {lat: 37.77995187146094, lng: -122.38957020952795};
// 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 Oracle Park
var marker = new google.maps.Marker({position: oraclePark, 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&v=beta"
></script>
</body>
</html>
Se guidi un veicolo con l'ID specificato vicino a Oracle Park, questo verrà visualizzato sul mappa.