Quando condividi un percorso, la tua app consumer mostra la posizione del veicolo appropriato per il consumatore. Per farlo, la tua app deve avviare la condivisione aggiornare il percorso durante il viaggio, nonché interrompere la condivisione una volta completato il percorso.
Questo documento illustra i seguenti passaggi chiave della procedura:
- Configurare una mappa
- Inizializza una mappa e visualizza il percorso condiviso
- Aggiorna e segui la posizione del percorso
- Interrompi condivisione percorso
- Gestire gli errori di condivisione dei percorsi
Configurare una mappa
Per seguire un ritiro o una consegna di una spedizione nella tua app web, devi caricare una mappa e creare un'istanza dell'SDK consumer per iniziare a monitorare il tuo percorso. Puoi caricare puoi creare una nuova mappa o utilizzarne una esistente. Poi userai il modello di inizializzazione per creare un'istanza dell'SDK consumer in modo che la vista mappa corrisponda posizione dell'elemento monitorato.
Carica una nuova mappa utilizzando l'API Google Maps JavaScript
Per creare una nuova mappa, carica l'API Google Maps JavaScript nell'app web. La l'esempio seguente mostra come caricare l'API Google Maps JavaScript, abilitare il metodo SDK e attivare il controllo di inizializzazione.
- Il parametro
callbackesegue la funzioneinitMapdopo il caricamento dell'API. - L'attributo
deferconsente al browser di continuare a visualizzare il resto dei tuoi durante il caricamento dell'API.
Usa la funzione initMap per creare un'istanza dell'SDK consumer. Ad esempio:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
Carica una mappa esistente
Puoi anche caricare una mappa esistente creata con l'API Google Maps JavaScript, come quella già in uso.
Ad esempio, supponiamo che tu abbia una pagina web con un google.maps.Map standard
su cui viene visualizzato un indicatore, come definito nel seguente codice HTML. Questo
mostra la mappa utilizzando la stessa funzione initMap nel callback alla fine:
<!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 Pier 39 in San Francisco
var pier39 = {lat: 37.809326, lng: -122.409981};
// 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 Pier 39
var marker = new google.maps.Marker({position: pier39, map: map});
}
</script>
<!-- Load the API from the specified URL.
* The defer attribute allows the browser to render the page while the API loads.
* The key parameter contains your own API key.
* 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>
Sostituire una mappa esistente
Puoi sostituire una mappa esistente che include indicatori o altre personalizzazioni senza perdere le personalizzazioni.
Ad esempio, se hai una pagina web con un google.maps.Map standard
su cui viene visualizzato un indicatore, puoi sostituire la mappa e mantenere
l'indicatore. In questa sezione vengono descritti i passaggi da seguire.
Per sostituire la mappa e mantenere le personalizzazioni, aggiungi la condivisione del percorso a la tua pagina HTML seguendo questi passaggi, numerati anche nell'esempio in cui che segue:
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. Se effettui una corsa con l'ID specificato vicino a Uluru, ora viene visualizzato sulla mappa:
<!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 Pier 39 in San Francisco
var pier39 = {lat: 37.809326, lng: -122.409981};
// 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 Pier 39
var marker = new google.maps.Marker({position: pier39, 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>
Inizializza una mappa e visualizza il percorso condiviso
Quando un percorso inizia, la tua app deve creare un'istanza del fornitore di posizione del viaggio e poi inizializza una mappa per iniziare la condivisione del percorso. Consulta le seguenti sezioni per consultare alcuni esempi.
Creare un'istanza per un fornitore di servizi di localizzazione di un viaggio
L'SDK JavaScript ha un provider di posizione predefinito per l'API Fleet Engine Ridesharing. Utilizza l'ID progetto e un riferimento alla tua fabbrica di token per crearla.
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: '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',
});
Inizializzare la visualizzazione mappa
Dopo aver caricato l'SDK JavaScript, inizializza
la visualizzazione mappa e aggiungerla alla pagina HTML. La pagina deve contenere
un elemento <div> contenente la visualizzazione mappa. L'elemento <div>
è denominato map_canvas nell'esempio seguente.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
// Location tracking starts 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 choose.
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.
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// 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 starts 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 choose.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);
Aggiorna e segui la posizione del percorso
L'app deve rilevare gli eventi e aggiornare lo stato di avanzamento del percorso come percorso avanza. Puoi recuperare le meta informazioni su una corsa dall'oggetto attività utilizzando il fornitore di servizi di localizzazione. Le meta informazioni includono l'orario di arrivo stimato e distanza rimanente prima del ritiro o della partenza. Modifiche alle meta informazioni attivare 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);
});
Interrompi condivisione percorso
Al termine del percorso, devi interrompere il monitoraggio del monitoraggio percorso. Per farlo, rimuovi l'ID viaggio e fornitore di servizi di localizzazione. Consulta le sezioni seguenti per alcuni esempi.
Rimuovi l'ID viaggio dal fornitore di posizione
L'esempio seguente mostra come rimuovere un ID corsa 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);
Gestire gli errori di condivisione dei percorsi
Errori che si verificano in modo asincrono in seguito alla richiesta di informazioni sulla corsa. e gli eventi di errore. L'esempio seguente mostra come ascoltare 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);
});