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, segui questi passaggi:

  1. Carica la libreria e inizializza la visualizzazione mappa
  2. Fornisci la posizione del veicolo e la visualizzazione mappa
  3. Ascolta gli eventi e gestisci gli errori
  4. Interrompi il monitoraggio

Carica la libreria e inizializza la visualizzazione mappa

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

  • Origine URL: chiama l'API Google Maps per richiedere una mappa utilizzando la 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>

Fornisci la posizione del veicolo e la visualizzazione mappa

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

Crea un'istanza di un provider di posizione del veicolo

La libreria di monitoraggio della flotta JavaScript include un provider di posizione per l'API Fleet Engine. Utilizza l'ID progetto e un riferimento al recuperatore 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',
});

Inizializza la visualizzazione mappa

Dopo aver caricato la libreria JavaScript Journey Sharing, inizializza la visualizzazione mappa e aggiungila alla pagina HTML. La pagina deve contenere un <div> elemento che contiene la visualizzazione 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 avviato il monitoraggio di un veicolo, devi aggiornarne l'avanzamento su una mappa e gestire gli errori durante il percorso.

Ascolta gli eventi del veicolo

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

Recupera i metadati dall'oggetto vehicle o deliveryVehicle utilizzando il provider di posizione. Le informazioni sui metadati includono l'ETA e la distanza rimanente prima del successivo ritiro o consegna del veicolo. Le modifiche alle informazioni sui metadati attivano un evento update nel provider di posizione.

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);
  }
});

Gestisci gli errori

Dopo aver caricato la libreria JavaScript Journey Sharing, inizializza la visualizzazione mappa e aggiungila alla pagina HTML. La pagina deve contenere un <div> elemento che contiene la visualizzazione 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);

Interrompi il monitoraggio di un veicolo

Per interrompere il monitoraggio di un veicolo, devi rimuoverlo dal provider di posizione e rimuovere il provider di posizione dalla visualizzazione mappa, come descritto nelle sezioni seguenti. Gli esempi riportati qui si applicano sia all'implementazione di viaggi on demand sia a quella di attività pianificate.

Rimuovi un veicolo dal provider di posizione

Per impedire al provider di posizione di monitorare un veicolo, rimuovi l'ID del veicolo di consegna dal provider di posizione.

Viaggi on demand

JavaScript

locationProvider.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

Attività pianificate

JavaScript

locationProvider.deliveryVehicleId = '';

TypeScript

locationProvider.deliveryVehicleId = '';

Rimuovi il provider di posizione dalla visualizzazione mappa

L'esempio seguente mostra come rimuovere un provider di posizione dalla visualizzazione mappa.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Passaggi successivi