Traccia un veicolo

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:

1. Caricare la libreria e inizializzare la visualizzazione mappa
2. Fornire la posizione del veicolo e la visualizzazione 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 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 funzione initMap 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

locationProvider =
    new google.maps.journeySharing
        .FleetEngineVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

locationProvider =
    new google.maps.journeySharing
        .FleetEngineVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

Attività pianificate

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // deliveryVehicleId to immediately start
          // tracking.
          deliveryVehicleId: 'your-delivery-id',
});

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

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

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

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

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

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

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

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

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

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

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

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

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

locationProvider.vehicleId = '';

locationProvider.vehicleId = '';

Attività pianificate

locationProvider.deliveryVehicleId = '';

locationProvider.deliveryVehicleId = '';

Rimuovere il fornitore di posizione dalla visualizzazione mappa

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

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

Passaggi successivi

• Visualizzare un parco risorse di consegna
• Applicare uno stile a una mappa