L'SDK JavaScript ti consente di visualizzare la posizione
dei veicoli e le località di interesse monitorati in Fleet Engine. La libreria contiene un componente mappa JavaScript che sostituisce un'entità google.maps.Map standard e i componenti di dati da connettere a Fleet Engine. Utilizzando l'SDK JavaScript, puoi fornire un'esperienza animata e personalizzabile di avanzamento di viaggi e ordini dalla tua applicazione web.
Componenti
L'SDK JavaScript fornisce componenti per la visualizzazione di veicoli e tappe, nonché feed di dati non elaborati per l'orario di arrivo stimato del conducente o la distanza rimanente da percorrere.
Visualizzazione mappa dello stato di avanzamento dei viaggi e degli ordini
Il componente Visualizzazione mappa mostra la posizione dei veicoli e delle tappe. Se il percorso di un veicolo è noto, il componente Visualizzazione mappa anima quel veicolo mentre si sposta lungo il percorso previsto.
Fornitore di luoghi di viaggio
L'SDK JavaScript include un provider di località delle corse che inserisce le informazioni sulla posizione per gli oggetti monitorati nella mappa di avanzamento delle corse e degli ordini.
Puoi utilizzare il fornitore della posizione 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 monitora la posizione di oggetti come tappe e veicoli.
Località di partenza
La località di partenza è il luogo da cui inizia un viaggio. Contrassegna il punto di prelievo.
Località di destinazione
La località di destinazione è il luogo in cui termina un viaggio. Contrassegna il punto di consegna.
Posizione waypoint
La posizione di una tappa è qualsiasi luogo lungo il percorso di un viaggio monitorato. Ad esempio, ogni fermata del percorso dell'autobus corrisponde a una tappa.
Posizione del veicolo
La posizione del veicolo è la posizione monitorata di un veicolo. Può includere facoltativamente 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. 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 di stile
Gli stili degli indicatori e delle polilinee determinano l'aspetto degli oggetti posizione tracciati sulla mappa. Puoi utilizzare le opzioni di personalizzazione degli stili 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 posizione monitorati sulla mappa per i provider di località predefiniti di Fleet Engine. I provider di località personalizzate o derivate possono modificare le regole di visibilità.
Vehicles
Un veicolo di ridesharing è visibile dal momento in cui viene assegnato a una corsa fino al momento della consegna. Se la corsa viene annullata, il veicolo è più visibile.
Tutti gli altri indicatori di posizione
Tutti gli altri indicatori di posizione per il luogo di partenza, la destinazione e le tappe sono sempre mostrati sulla mappa. Ad esempio, sulla mappa viene sempre mostrato un punto di consegna ridesharing o una località di consegna della spedizione, indipendentemente dallo stato del viaggio o della consegna.
Inizia a utilizzare l'SDK JavaScript
Prima di utilizzare l'SDK JavaScript, assicurati di acquisire familiarità con Fleet Engine e con il recupero di una chiave API.
Per monitorare una corsa di ridesharing, crea prima una richiesta di ID viaggio.
Crea una rivendicazione relativa all'ID viaggio
Per monitorare una corsa utilizzando il provider della località di corsa, crea un token web JSON (JWT) con una dichiarazione di ID corsa.
Per creare il payload JWT, aggiungi un'ulteriore attestazione nella sezione di autorizzazione con la chiave tripid e imposta il relativo valore sull'ID trip.
L'esempio seguente mostra come creare un token per il monitoraggio per 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",
}
}
Crea 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 sui client. altrimenti rischi di compromettere 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 in questo periodo di tempo dopo il recupero.
L'SDK JavaScript consumer 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 in un nuovo caricamento pagina o se il fetcher non ha restituito il fetcher con un token.
- Il token recuperato in precedenza è scaduto.
- Il token recuperato in precedenza scade un minuto dopo la 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, il valore è
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 tuo provider. Questi sono gli URL del 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 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>
Durante un viaggio
Questa sezione mostra come utilizzare l'SDK JavaScript per seguire un viaggio di ridesharing o di consegna. Assicurati di caricare la libreria dalla funzione di callback specificata nel tag script prima di eseguire il codice.
Creare un'istanza per un fornitore di servizi di localizzazione di un viaggio
L'SDK JavaScript predefinisce un provider di localizzazione per l'API Fleet Engine Ridesharing. Utilizza l'ID progetto e un riferimento alla tua 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> che include la visualizzazione mappa. Nell'esempio riportato di seguito, l'elemento <div> si chiama map_canvas.
Per evitare le condizioni di gara, imposta l'ID corsa 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],
// 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);
Ascolta gli eventi di modifica
Puoi recuperare le meta informazioni su una corsa dall'oggetto attività utilizzando il provider di località. Le meta informazioni includono l'orario di arrivo stimato e la distanza rimanente prima del ritiro 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 che derivano in modo asincrono in seguito alla richiesta di informazioni sulla 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 eseguire il wrapping delle chiamate alla libreria nei blocchi try...catch per gestire errori imprevisti.
Interrompi monitoraggio
Per impedire al fornitore di posizione di monitorare la corsa, rimuovi l'ID percorso dal fornitore di posizione.
JavaScript
locationProvider.tripId = '';
TypeScript
locationProvider.tripId = '';
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);
Personalizzazione dell'aspetto della mappa base
Per personalizzare l'aspetto del componente Maps, applica uno stile alla 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 ti consente di creare e modificare gli stili di mappa per qualsiasi app che utilizza Google Maps dalla console Google Cloud, senza dover apportare modifiche al codice.
Gli stili di mappa vengono salvati come ID mappa nel progetto Cloud. Per
applicare uno stile alla mappa dell'SDK JavaScript, specifica un
mapId
e qualsiasi altro mapOptions
quando crei JourneySharingMapView. Non è possibile modificare o aggiungere il campo mapId dopo aver creato l'istanza di JourneySharingMapView. L'esempio
seguente 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.
});
Utilizza lo stile delle mappe basato 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 degli indicatori aggiunti alla mappa. A questo scopo, devi specificare le personalizzazioni degli indicatori, che l'SDK JavaScript applica prima di aggiungere indicatori alla mappa e a 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 le eventuali opzioni predefinite.
Un'opzione più avanzata è specificare una funzione di personalizzazione. Le funzioni di personalizzazione consentono di definire lo stile degli indicatori in base ai dati e di aggiungere interattività agli indicatori, ad esempio la gestione dei clic. Nello specifico, l'avanzamento di viaggi e ordini trasmette i dati alla funzione di personalizzazione relative al tipo di oggetto rappresentato dall'indicatore: veicolo, origine, tappa o destinazione. In questo modo, lo stile degli indicatori può cambiare in base allo stato corrente dell'elemento stesso dell'indicatore, ad esempio il numero di tappe rimanenti fino al termine della corsa del veicolo. Puoi anche eseguire un'unione con dati provenienti da origini esterne a Fleet Engine e definire lo stile dell'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 dell'indicatore di un veicolo con
un oggetto MarkerOptions. Segui questo schema per personalizzare lo stile di qualsiasi indicatore utilizzando una delle personalizzazioni degli indicatori elencate in precedenza.
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 degli indicatori di veicoli. Segui questo pattern per personalizzare lo stile di qualsiasi indicatore usando uno dei parametri di personalizzazione dell'indicatore 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}`);
};
Aggiungi gestione dei clic agli indicatori
L'esempio seguente mostra come aggiungere la gestione dei clic a un indicatore di veicolo. Segui questo pattern per aggiungere la gestione dei clic a qualsiasi indicatore utilizzando uno qualsiasi dei parametri di personalizzazione dell'indicatore 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.
});
}
};
Utilizza personalizzazioni delle polilinee
Con l'SDK JavaScript, puoi anche personalizzare l'aspetto del percorso
di corsa sulla mappa. La libreria crea un oggetto google.maps.Polyline per ogni coppia di coordinate nel percorso attivo o rimanente del veicolo.
Puoi definire lo stile degli oggetti Polyline specificando le personalizzazioni delle polilinee. La libreria applica quindi queste personalizzazioni in due situazioni: prima di aggiungere oggetti alla mappa e quando i dati utilizzati per gli oggetti sono stati modificati.
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 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 del veicolo; ad esempio, colorando l'oggetto Polyline con una tonalità più profonda o rendendolo più spesso quando il veicolo si muove più lentamente. Puoi anche eseguire un 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 diversi stati del percorso nel 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 viaggio attivo;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
delle personalizzazioni delle polilinee elencate in precedenza.
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
Modifica lo stile di Polyline oggetti utilizzando le funzioni di personalizzazione
L'esempio seguente mostra come configurare lo stile di un oggetto Polyline attivo. Segui questo pattern per personalizzare lo stile di qualsiasi oggetto Polyline
usando uno 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 del veicolo seguito. Puoi utilizzare queste informazioni per definire lo stile degli 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 InfoWindow
per visualizzare 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:
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 adattarsi automaticamente all'area visibile al veicolo e al percorso previsto disattivando il montaggio automatico. L'esempio seguente mostra come disabilitare l'adattamento automatico quando configuri la visualizzazione mappa dei percorsi e dell'avanzamento 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, supponiamo che tu abbia una pagina web con un'entità google.maps.Map standard in cui viene mostrato 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 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
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 esegui una corsa con l'ID specificato vicino a Uluru, ora verrà visualizzata sulla mappa.