Traccia un veicolo

Questa sezione mostra come utilizzare la libreria di monitoraggio della flotta JavaScript per monitorare un veicolo per viaggi on demand o attività pianificate.

Per monitorare un veicolo:

  1. Carica la libreria e inizializza la visualizzazione della mappa
  2. Fornire la posizione del veicolo e la visualizzazione della mappa
  3. Ascoltare gli eventi e gestire gli errori
  4. Interrompere il monitoraggio

Carica la libreria e inizializza la visualizzazione mappa

Per visualizzare le operazioni della flotta su una mappa nella tua pagina web, utilizza uno script che chiama una mappa utilizzando la tua chiave API. Il seguente esempio mostra come eseguire questa operazione da HTML:

  • Origine URL: chiama l'API di Google Maps per richiedere una mappa utilizzando la tua chiave API.

  • Parametro callback: esegue la funzione initMap dopo che l'API restituisce la chiamata.

  • Parametro libraries: carica la libreria di monitoraggio della flotta.

  • 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>

Fornire la posizione del veicolo e la visualizzazione della mappa

Per iniziare a monitorare un veicolo, devi creare un'istanza di un fornitore di posizione del veicolo e inizializzare una visualizzazione mappa con l'ID veicolo, come descritto nelle sezioni seguenti.

Crea un'istanza di un fornitore di geolocalizzazione del veicolo

La libreria di monitoraggio della flotta JavaScript include un fornitore di servizi di localizzazione per l'API Fleet Engine. Utilizza l'ID progetto e un riferimento al token fetcher per istanziarlo 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 JavaScript Journey Sharing, inizializza la visualizzazione della mappa e aggiungila alla pagina HTML. La pagina deve contenere un elemento <div> che contiene la visualizzazione della mappa. L'elemento <div> è denominato map_canvas negli esempi seguenti.=

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

Una volta iniziato il monitoraggio di un veicolo, devi aggiornare i suoi progressi su una mappa e gestire gli errori mentre il veicolo percorre il suo itinerario.

Ascolta gli eventi relativi ai veicoli

Per monitorare l'avanzamento di un veicolo per viaggi on demand o attività pianificate, devi ascoltare gli eventi di modifica.

Recuperi i metadati dall'oggetto vehicle o deliveryVehicle utilizzando il provider di geolocalizzazione. Le meta informazioni includono l'ETA e la distanza rimanente prima del successivo ritiro o rilascio del veicolo. Le modifiche alle meta informazioni attivano un evento di aggiornamento nel fornitore di servizi di localizzazione.

Il seguente esempio 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);
  }
});

Gestisci gli errori

Dopo aver caricato la libreria JavaScript Journey Sharing, inizializza la visualizzazione della mappa e aggiungila alla pagina HTML. La pagina deve contenere un elemento <div> che contiene la visualizzazione della mappa. L'elemento <div> è denominato map_canvas negli esempi seguenti.=

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 rimuovere il fornitore di servizi di localizzazione dalla visualizzazione della mappa come descritto nelle sezioni seguenti. Gli esempi riportati qui si applicano sia alle corse on demand sia all'implementazione delle attività pianificate.

Rimuovere un veicolo dal fornitore di servizi di localizzazione

Per impedire al fornitore di servizi di localizzazione di monitorare un veicolo, rimuovi l'ID del veicolo di consegna dal fornitore di servizi di localizzazione.

Viaggi on demand

JavaScript

locationProvider.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

Attività pianificate

JavaScript

locationProvider.deliveryVehicleId = '';

TypeScript

locationProvider.deliveryVehicleId = '';

Rimuovere il fornitore di servizi di localizzazione dalla visualizzazione della mappa

L'esempio seguente mostra come rimuovere un fornitore di servizi di localizzazione dalla visualizzazione della mappa.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Passaggi successivi