L'SDK JavaScript ti consente di visualizzare la posizione
dei veicoli e le località di interesse monitorate in Fleet Engine. La libreria contiene un componente di mappa JavaScript che sostituisce direttamente un'entità google.maps.Map e componenti di dati standard da connettere a Fleet Engine. Con l'SDK JavaScript, puoi fornire un'esperienza animata e personalizzabile di avanzamento degli ordini e dei viaggi dalla tua applicazione web.
Componenti
L'SDK JavaScript fornisce componenti per la visualizzazione dei veicoli e dei waypoint, nonché feed di dati non elaborati per l'orario di arrivo stimato di un conducente o la distanza rimanente da percorrere.
Visualizzazione mappa di avanzamento percorso e ordine
Il componente visualizzazione mappa mostra la posizione dei veicoli e dei waypoint. Se il percorso di un veicolo è noto, il componente Visualizzazione mappa anima il veicolo mentre si sposta lungo il percorso previsto.
Fornitore posizione di viaggio
L'SDK JavaScript include un fornitore della posizione di viaggio che inserisce le informazioni sulla posizione degli oggetti monitorati nella mappa di avanzamento della corsa e dell'ordine.
Puoi utilizzare il fornitore della località di viaggio per monitorare:
- Il punto di partenza o di arrivo di una corsa.
- La posizione e il percorso del veicolo assegnato alla corsa.
Oggetti posizione monitorati
Il fornitore della posizione tiene traccia della posizione di oggetti quali waypoint e veicoli.
Località di partenza
La località di partenza è il luogo da cui inizia un viaggio. Indica il punto di ritiro.
Località di destinazione
La località di destinazione è il luogo in cui finisce un viaggio. Contrassegna il punto di consegna.
Posizione del waypoint
La posizione di un waypoint è qualsiasi luogo lungo il percorso di un percorso monitorato. Ad esempio, ogni fermata di una linea di autobus è una posizione di un waypoint.
Posizione del veicolo
La posizione del veicolo è quella tracciata di un veicolo. Inoltre, può includere un percorso per il veicolo.
Recupero token di autenticazione
Per controllare l'accesso ai dati sulle località archiviati in Fleet Engine, devi implementare un servizio di minting di token web JSON (JWT) per Fleet Engine sul tuo server. Quindi implementa un fetcher di token di autenticazione come parte della tua applicazione web, utilizzando l'SDK JavaScript per autenticare l'accesso ai dati sulla posizione.
Opzioni per lo stile
Gli stili di indicatori e polilinee determinano l'aspetto e il design degli oggetti posizione tracciati sulla mappa. Puoi utilizzare le opzioni di stile personalizzate per modificare lo stile predefinito in modo che corrisponda a quello della tua applicazione web.
Controllo della visibilità delle località monitorate
Questa sezione descrive le regole di visibilità per gli oggetti di posizione monitorati sulla mappa per i fornitori di posizione predefiniti di Fleet Engine. I provider di località personalizzate o derivate possono modificare le regole di visibilità.
Veicoli
Un veicolo in ridesharing è visibile dal momento in cui viene assegnato a una corsa fino al momento del ritiro. Se la corsa viene annullata, il veicolo è più visibile.
Tutti gli altri indicatori di posizione
Tutti gli altri indicatori di posizione per l'origine, la destinazione e i waypoint vengono sempre mostrati sulla mappa. Ad esempio, un punto di consegna di un ridesharing o un luogo di consegna di una spedizione vengono sempre mostrati sulla mappa, indipendentemente dallo stato della corsa o della consegna.
Inizia a utilizzare l'SDK JavaScript
Prima di utilizzare l'SDK JavaScript, assicurati di conoscere Fleet Engine e di come ottenere una chiave API.
Per monitorare un viaggio in ridesharing, devi prima creare una rivendicazione dell'ID viaggio.
Creare una rivendicazione dell'ID viaggio
Per monitorare una corsa con il fornitore per la posizione delle corse, crea un token JWT (JSON Web Token) con un'attestazione dell'ID della corsa.
Per creare il payload JWT, aggiungi un'ulteriore richiesta nella sezione dell'autorizzazione con la chiave tripid e imposta il relativo valore sull'ID corsa.
L'esempio seguente mostra come creare un token per il monitoraggio in base all'ID corsa:
{
"alg": "RS256",
"typ": "JWT",
"kid": "private_key_id_of_consumer_service_account"
}
.
{
"iss": "consumer@yourgcpproject.iam.gserviceaccount.com",
"sub": "consumer@yourgcpproject.iam.gserviceaccount.com",
"aud": "https://fleetengine.googleapis.com/",
"iat": 1511900000,
"exp": 1511903600,
"scope": "https://www.googleapis.com/auth/xapi",
"authorization": {
"tripid": "tid_12345",
}
}
Creare un fetcher di token di autenticazione
Puoi creare un fetcher di token di autenticazione per recuperare un token creato con le attestazioni appropriate sui tuoi server utilizzando un certificato dell'account di servizio per il tuo progetto. È importante generare solo token sui server e non condividere mai i certificati su alcun client. In caso contrario, si compromette la sicurezza del sistema.
Il fetcher deve restituire una struttura di dati con due campi, aggregati in una promessa:
- Una stringa
token. - Un numero
expiresInSeconds. Un token scade dopo questo intervallo di tempo dopo il recupero.
L'SDK consumer JavaScript richiede un token tramite il fetcher di token di autenticazione quando si verifica una delle seguenti condizioni:
- Non ha un token valido, ad esempio se non ha chiamato il fetcher su un nuovo caricamento della pagina o quando il fetcher non ha restituito un token.
- Il token recuperato in precedenza è scaduto.
- Il token recuperato in precedenza è trascorso entro un minuto dalla scadenza.
In caso contrario, l'SDK utilizza il token ancora valido, emesso in precedenza e non chiama il fetcher.
L'esempio seguente mostra come creare un fetcher di token di autenticazione:
JavaScript
async function authTokenFetcher(options) {
// options is a record containing two keys called
// serviceType and context. The developer should
// generate the correct SERVER_TOKEN_URL and request
// based on the values of these fields.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.Token,
expiresInSeconds: data.ExpiresInSeconds
};
}
TypeScript
function authTokenFetcher(options: {
serviceType: google.maps.journeySharing.FleetEngineServiceType,
context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
// The developer should generate the correct
// SERVER_TOKEN_URL based on options.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.jwt,
expiresInSeconds: data.expirationTimestamp - Date.now(),
};
}
Quando implementi l'endpoint lato server per il mining dei token, tieni presente quanto segue:
- L'endpoint deve restituire una data di scadenza per il token; nell'esempio precedente, è specificato come
data.ExpiresInSeconds. - Il fetcher del token di autenticazione deve passare la data di scadenza (in secondi, dal momento del recupero) alla libreria, come mostrato nell'esempio.
- SERVER_TOKEN_URL dipende dall'implementazione del provider; questi sono gli URL per il provider di esempio:
- https://
SERVER_URL/token/driver/VEHICLEID - https://
SERVER_URL/token/consumer/TRIPID
- https://
Carica una mappa da HTML
L'esempio seguente mostra come caricare l'SDK 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 a eseguire il rendering del 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>
Stai seguendo un viaggio
Questa sezione mostra come usare l'SDK JavaScript per seguire un viaggio in ridesharing o con consegna a domicilio. Assicurati di caricare la libreria dalla funzione di callback specificata nel tag script prima di eseguire il codice.
Crea l'istanza di un fornitore di località di viaggio
L'SDK JavaScript predefinisce un provider posizione per l'API Fleet Engine Ridesharing. Utilizza il tuo ID progetto e un riferimento alla fabbrica di token per creare un'istanza.
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineTripLocationProvider({
projectId: 'your-project-id',
authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step
// Optionally, you may specify a trip ID to
// immediately start tracking.
tripId: 'your-trip-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineTripLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify a trip ID to
// immediately start tracking.
tripId: 'your-trip-id',
});
Inizializzare la visualizzazione mappa
Dopo aver caricato l'SDK JavaScript, inizializza la visualizzazione mappa e aggiungila 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.
Per evitare le condizioni di gara, imposta l'ID corsa per il fornitore di 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],
// Styling customizations; see below.
vehicleMarkerCustomization: vehicleMarkerCustomization,
activePolylineCustomization: activePolylineCustomization,
// Any undefined styling options will use defaults.
});
// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.tripId = 'your-trip-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise, the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
vehicleMarkerCustomization: vehicleMarkerCustomization,
activePolylineCustomization: activePolylineCustomization,
// Any undefined styling options will use defaults.
});
// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
locationProvider.tripId = 'your-trip-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise, the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);
Ascoltare gli eventi di modifica
Puoi recuperare le meta informazioni su una corsa dall'oggetto attività utilizzando il fornitore della posizione. Le meta informazioni includono l'orario di arrivo stimato e la distanza rimanente prima della partenza o della consegna. Le modifiche alle meta informazioni attivano un evento update. L'esempio seguente mostra come ascoltare questi eventi di modifica.
JavaScript
locationProvider.addListener('update', e => {
// e.trip contains data that may be useful
// to the rest of the UI.
console.log(e.trip.dropOffTime);
});
TypeScript
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
// e.trip contains data that may be useful
// to the rest of the UI.
console.log(e.trip.dropOffTime);
});
Gestire gli errori
Gli errori derivanti in modo asincrono dalla richiesta di informazioni di corsa attivano eventi di errore. L'esempio seguente mostra come rimanere in ascolto di questi eventi per gestire gli errori.
JavaScript
locationProvider.addListener('error', e => {
// e.error contains the error that triggered the
// event
console.error(e.error);
});
TypeScript
locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
// e.error contains the error that triggered the
// event
console.error(e.error);
});
Nota: assicurati di aggregare le chiamate della libreria in blocchi try...catch per gestire gli errori imprevisti.
Interrompi monitoraggio
Per impedire al fornitore della posizione di monitorare la corsa, rimuovi l'ID della corsa dal fornitore della posizione.
JavaScript
locationProvider.tripId = '';
TypeScript
locationProvider.tripId = '';
Rimuovi il fornitore della 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);
Personalizzazione dell'aspetto della mappa base
Per personalizzare l'aspetto del componente per le mappe, applica lo stile della mappa utilizzando strumenti basati su cloud o impostando le opzioni direttamente nel codice.
Utilizzo della personalizzazione delle mappe basata su cloud
La personalizzazione delle mappe basata su cloud
consente di creare e modificare gli stili di mappa per qualsiasi 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 tuo progetto Cloud. Per applicare uno stile alla mappa dell'SDK JavaScript, specifica un elemento mapId e un altro elemento mapOptions quando crei JourneySharingMapView. Il campo mapId non può essere modificato o aggiunto dopo aver creato un'istanza di JourneySharingMapView. Il seguente esempio 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'
}
// and any other styling options.
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// and any other styling options.
});
Utilizzare gli stili di mappa basati su codice
Un altro modo per personalizzare gli stili della mappa è impostare mapOptions quando crei 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 l'SDK JavaScript puoi personalizzare l'aspetto e il design degli indicatori aggiunti alla mappa. A tale scopo, specifica le personalizzazioni degli indicatori che l'SDK JavaScript applica prima di aggiungere indicatori alla mappa e ad ogni aggiornamento degli indicatori.
La personalizzazione più semplice consiste nello specificare un oggetto MarkerOptions che verrà applicato a tutti gli indicatori dello stesso tipo. Le modifiche specificate nell'oggetto vengono applicate dopo la creazione di ciascun indicatore, sovrascrivendo eventuali opzioni predefinite.
Un'opzione più avanzata consiste nello specificare una funzione di personalizzazione. Le funzioni di personalizzazione consentono di applicare uno stile agli indicatori in base ai dati e di aggiungere interattività agli indicatori, come la gestione dei clic. In particolare, Trip and Order Progress trasmette alla funzione di personalizzazione i dati relativi al tipo di oggetto rappresentato dall'indicatore: veicolo, origine, waypoint o destinazione. Ciò consente quindi di modificare gli stili degli indicatori in base allo stato corrente dell'elemento indicatore stesso, ad esempio il numero di waypoint rimanenti fino a quando il veicolo non completa la corsa. Puoi anche unirti ai dati provenienti da origini esterne a Fleet Engine e applicare uno stile all'indicatore in base a queste informazioni.
L'SDK JavaScript fornisce i seguenti parametri di personalizzazione in FleetEngineTripLocationProviderOptions:
vehicleMarkerCustomizationoriginMarkerCustomizationwaypointMarkerCustomizationdestinationMarkerCustomization
Modifica lo stile degli indicatori utilizzando MarkerOptions
L'esempio seguente mostra come configurare lo stile di un indicatore di veicolo con un oggetto MarkerOptions. Segui questo schema per personalizzare
lo stile degli indicatori.
JavaScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
Modificare lo stile degli indicatori utilizzando le funzioni di personalizzazione
L'esempio seguente mostra come configurare lo stile di un indicatore di veicolo. Segui questo pattern per personalizzare lo stile di qualsiasi indicatore utilizzando uno dei parametri di personalizzazione degli indicatori elencati in precedenza.
JavaScript
vehicleMarkerCustomization =
(params) => {
var distance = params.trip.remainingWaypoints.length;
params.marker.setLabel(`${distance}`);
};
TypeScript
vehicleMarkerCustomization =
(params: TripMarkerCustomizationFunctionParams) => {
const distance = params.trip.remainingWaypoints.length;
params.marker.setLabel(`${distance}`);
};
Aggiungere la 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 dei parametri di personalizzazione degli indicatori elencati in precedenza.
JavaScript
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
vehicleMarkerCustomization =
(params: TripMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
Usare le personalizzazioni delle polilinee
Con l'SDK JavaScript, puoi anche personalizzare l'aspetto e il design del percorso
sulla mappa. La libreria crea un oggetto google.maps.Polyline per ogni coppia di coordinate nel percorso attivo o rimanente del veicolo.
Puoi definire gli oggetti Polyline specificando le personalizzazioni della polilinea. La libreria applica quindi queste personalizzazioni in due situazioni: prima di aggiungere gli oggetti alla mappa e quando i dati utilizzati per gli oggetti sono cambiati.
Come per la personalizzazione degli indicatori, puoi specificare un insieme di PolylineOptions da applicare a tutti gli oggetti Polyline corrispondenti quando vengono creati o aggiornati.
Analogamente, puoi specificare una funzione di personalizzazione. Le funzioni di personalizzazione
consentono di applicare 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 del veicolo, ad esempio colorando l'oggetto Polyline con un colore più scuro o rendendolo più spesso quando il veicolo si muove più lentamente. Puoi anche eseguire join
da origini esterne a Fleet Engine e definire lo stile dell'oggetto Polyline in base a queste
informazioni.
Puoi specificare le personalizzazioni utilizzando i parametri forniti in
FleetEngineTripLocationProviderOptions.
Puoi impostare le personalizzazioni per i diversi stati del percorso nel percorso del veicolo: già percorso, attivamente in viaggio o non ancora percorso. I parametri sono i seguenti:
takenPolylineCustomization, per un percorso già percorso;activePolylineCustomization, per un percorso in movimento;remainingPolylineCustomization, per un percorso non ancora percorso.
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 utilizzando una qualsiasi delle personalizzazioni della polilinea 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 di un oggetto Polyline attivo. Segui questo pattern per personalizzare lo stile di qualsiasi oggetto Polyline utilizzando uno qualsiasi dei parametri di personalizzazione della polilinea elencati in precedenza.
JavaScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.trip.remainingWaypoints[0].distanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
});
}
};
TypeScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params: TripPolylineCustomizationFunctionParams) => {
const distance = params.trip.remainingWaypoints[0].distanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
});
}
};
Controlla la visibilità di Polyline oggetti
Per impostazione predefinita, tutti gli oggetti Polyline sono visibili. Per rendere invisibile un oggetto Polyline, imposta la relativa proprietà visible:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
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 utilizzare queste informazioni per definire gli oggetti Polyline in base alla velocità del traffico:
JavaScript
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineTripLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params) => {
FleetEngineTripLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineTripLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params: TripPolylineCustomizationFunctionParams) => {
FleetEngineTripLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
Mostra un InfoWindow per un veicolo o un indicatore di posizione
Puoi utilizzare un elemento InfoWindow per visualizzare ulteriori informazioni su un veicolo o un indicatore di posizione.
L'esempio seguente mostra come creare un elemento InfoWindow e attaccarlo
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.trip.remainingWaypoints.length;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
});
// 3. Close the info window.
infoWindow.close();
TypeScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
const stopsCount = e.trip.remainingWaypoints.length;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
});
// 3. Close the info window.
infoWindow.close();
Disattiva adattamento automatico
Puoi impedire alla mappa di adattare automaticamente l'area visibile al veicolo e al percorso previsto disattivando l'adattamento automatico. L'esempio seguente mostra come disattivare l'adattamento automatico quando configuri la visualizzazione della mappa di avanzamento della corsa e dell'ordine.
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 utilizzare l'SDK JavaScript per sostituire una mappa esistente che include indicatori o altre personalizzazioni senza perdere queste personalizzazioni.
Ad esempio, supponi di avere una pagina web con un'entità google.maps.Map standard sulla quale è 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, centered at Uluru
var map = new google.maps.Map(document.getElementById('map'));
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
}
</script>
<!-- Load the API from the specified URL.
* The async attribute allows the browser to render the page while the API loads.
* The key parameter will contain your own API key (which is not needed for this tutorial).
* The callback parameter executes the initMap() function.
-->
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Per aggiungere l'SDK JavaScript:
- Aggiungi il codice per il valore di fabbrica del token di autenticazione.
- Inizializza un fornitore di servizi di localizzazione 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 delle località al caricatore dell'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
async function authTokenFetcher(options) {
// options is a record containing two keys called
// serviceType and context. The developer should
// generate the correct SERVER_TOKEN_URL and request
// based on the values of these fields.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.Token,
expiresInSeconds: data.ExpiresInSeconds
};
}
// Initialize and add the map
function initMap() {
// (2) Initialize location provider.
locationProvider = new google.maps.journeySharing.FleetEngineTripLocationProvider({
projectId: "YOUR_PROVIDER_ID",
authTokenFetcher,
});
// (3) Initialize map view (which contains the map).
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map'),
locationProviders: [locationProvider],
// any styling options
});
locationProvider.tripId = TRIP_ID;
// (4) Add customizations like before.
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
// The map, centered at Uluru
var map = mapView.map;
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
};
</script>
<!-- Load the API from the specified URL
* The async attribute allows the browser to render the page while the API loads
* The key parameter will contain your own API key (which is not needed for this tutorial)
* The callback parameter executes the initMap() function
*
* (5) Add the SDK to the API loader.
-->
<script defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
</script>
</body>
</html>
Se effettui una corsa con l'ID specificato nei pressi di Uluru, ora verrà visualizzata sulla mappa.