Questa sezione mostra come utilizzare la libreria di monitoraggio del parco risorse JavaScript per monitorare un veicolo per viaggi on demand o attività programmate.
Per monitorare un veicolo, svolgi i seguenti passaggi:
- Caricare la libreria e inizializzare la visualizzazione mappa
- Fornire la posizione del veicolo e la visualizzazione mappa
- Ascoltare gli eventi e gestire gli errori
- Interrompere il monitoraggio
Carica la libreria e inizializza la visualizzazione mappa
Per visualizzare le operazioni del parco risorse su una mappa della tua pagina web, utilizza uno script che chiama una mappa utilizzando la tua chiave API. L'esempio seguente mostra come Per farlo dal codice HTML:
Origine URL: chiama l'API di Google Maps per richiedere una mappa utilizzando la tua chiave API.
Parametro
callback
: esegue la funzioneinitMap
dopo che l'API ha restituito la chiamata.Parametro
libraries
: carica la libreria di monitoraggio del parco risorse.Attributo
defer
: consente al browser di continuare a eseguire il rendering del resto dei tuoi contenuti durante il caricamento dell'API.<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
Fornisci la posizione del veicolo e la visualizzazione mappa
Per iniziare a monitorare un veicolo, entrambi create un'istanza del fornitore di servizi di localizzazione del veicolo e inizializza una visualizzazione mappa con l'ID veicolo, come descritto di seguito sezioni.
Creare un'istanza per un fornitore di servizi di localizzazione del veicolo
La libreria di monitoraggio del parco risorse JavaScript include un provider di posizione per il parco risorse l'API Compute Engine. Utilizza l'ID progetto e un riferimento al fetcher di token per creare un'istanza, come mostrato negli esempi seguenti.
Viaggi on demand
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// vehicleId to immediately start
// tracking.
vehicleId: 'your-vehicle-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// vehicleId to immediately start
// tracking.
vehicleId: 'your-vehicle-id',
});
Attività pianificate
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// deliveryVehicleId to immediately start
// tracking.
deliveryVehicleId: 'your-delivery-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// deliveryVehicleId to immediately start
// tracking.
deliveryVehicleId: 'your-delivery-id',
});
Inizializzare la visualizzazione mappa
Dopo aver caricato la libreria di condivisione del percorso JavaScript, inizializzala la visualizzazione mappa e aggiungerla alla pagina HTML. La pagina deve contenere Un elemento <div> contenente la visualizzazione mappa. L'elemento <div> è denominato map_canvas nei seguenti esempi.=
Viaggi on demand
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// 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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// 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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
Attività pianificate
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
Ascolta gli eventi e gestisci gli errori
Quando inizi a monitorare un veicolo, vuoi aggiornarne l'avanzamento su una mappa e gestire gli errori mentre il veicolo percorre il percorso.
Ascolta gli eventi del veicolo
Per monitorare lo stato di avanzamento di un veicolo per i viaggi on demand o le attività programmate: devi rimanere in ascolto degli eventi di modifica.
Recupera il meta dall'oggetto vehicle
o deliveryVehicle
utilizzando il metodo
fornitore di servizi di localizzazione. Le meta informazioni includono l'orario di arrivo stimato e la distanza rimanente
prima del successivo ritiro o consegna del veicolo. Modifiche alle meta informazioni
attivare un evento update nel provider di località.
L'esempio seguente mostra come ascoltare questi eventi di modifica.
Viaggi on demand
JavaScript
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);
}
});
TypeScript
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);
}
});
Attività pianificate
JavaScript
locationProvider.addListener('update', e => {
// e.deliveryVehicle contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicle) {
console.log(e.deliveryVehicle.remainingDuration);
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
// e.deliveryVehicle contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicle) {
console.log(e.deliveryVehicle.remainingDuration);
}
});
Gestire gli errori
Dopo aver caricato la libreria di condivisione del percorso JavaScript, inizializzala la visualizzazione mappa e aggiungerla alla pagina HTML. La pagina deve contenere Un elemento <div> contenente la visualizzazione mappa. L'elemento <div> è denominato map_canvas nei seguenti esempi.=
Viaggi on demand
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// 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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// 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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
Attività pianificate
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
Interrompere il monitoraggio di un veicolo
Per interrompere il monitoraggio di un veicolo, devi rimuoverlo dal fornitore di servizi di localizzazione e rimuovi il fornitore della posizione dalla visualizzazione mappa come descritto di seguito sezioni. Gli esempi qui riguardano sia i viaggi on demand sia le attività programmate implementazione.
Rimuovere un veicolo dal fornitore di servizi di localizzazione
Per impedire al fornitore di posizione di monitorare un veicolo, rimuovi il ID del veicolo per la consegna del fornitore della posizione.
Viaggi on demand
JavaScript
locationProvider.vehicleId = '';
TypeScript
locationProvider.vehicleId = '';
Attività pianificate
JavaScript
locationProvider.deliveryVehicleId = '';
TypeScript
locationProvider.deliveryVehicleId = '';
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);