Traccia un veicolo

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

Per monitorare un veicolo:

  1. Carica la raccolta 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 del tuo parco veicoli su una mappa nella tua pagina web, utilizza uno script che richiama una mappa utilizzando la tua 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 tua chiave API.

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

  • Parametro libraries: carica la libreria di monitoraggio del parco veicoli.

  • 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 sia creare un provider di posizione del veicolo sia inizializzare una visualizzazione mappa con l'ID del veicolo, come descritto nelle sezioni seguenti.

Crea un'istanza di un provider di geolocalizzazione del veicolo

La libreria di monitoraggio del parco veicoli JavaScript include un fornitore di posizione per l'API Fleet Engine. Utilizza l'ID progetto e un riferimento al tuo recuperatore di token 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 di condivisione dei percorsi, inizializza la visualizzazione della mappa e aggiungila alla pagina HTML. La pagina deve contenere un elemento <div> che contenga la visualizzazione della 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

Una volta iniziato a monitorare un veicolo, devi aggiornarne l'avanzamento su una mappa e gestire gli errori mentre il veicolo percorre il suo percorso.

Ascolta gli eventi del veicolo

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

Puoi recuperare i meta dall'oggetto vehicle o deliveryVehicle utilizzando il fornitore di servizi di geolocalizzazione. Le meta informazioni includono l'orario di arrivo stimato e la distanza rimanente prima del successivo ritiro o scambio del veicolo. Le modifiche alle metainformazioni attivano un evento di aggiornamento nel provider di posizione.

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

Gestire gli errori

Dopo aver caricato la libreria JavaScript di condivisione dei percorsi, inizializza la visualizzazione della mappa e aggiungila alla pagina HTML. La pagina deve contenere un elemento <div> che contenga la visualizzazione della 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 geolocalizzazione e rimuovere il fornitore di servizi di geolocalizzazione dalla visualizzazione mappa come descritto nelle sezioni seguenti. Gli esempi riportati si applicano sia all'implementazione delle corse on demand sia a quella delle attività pianificate.

Rimuovere un veicolo dal fornitore di servizi di geolocalizzazione

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 geolocalizzazione dalla visualizzazione mappa

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Passaggi successivi