Visualizza un parco risorse

Questa sezione mostra come utilizzare la libreria di monitoraggio del parco veicoli JavaScript per visualizzare un parco veicoli. Queste procedure presuppongono che tu abbia configurato la libreria di monitoraggio del parco risorse e caricato una mappa. Per maggiori dettagli, consulta Configurare la libreria di monitoraggio della flotta JavaScript.

Questo documento illustra le seguenti operazioni che puoi eseguire quando visualizzi un parco:

1. Inizia a monitorare la flotta.
2. Ascolta gli eventi e gestisci gli errori.
3. Interrompi il monitoraggio.
4. Monitorare un singolo veicolo mentre visualizzi un parco veicoli.

Inizia a monitorare la flotta

Per monitorare un parco veicoli, devi creare un provider di posizione del parco veicoli e impostare le limitazioni di località per l'area visibile della mappa come descritto nelle sezioni seguenti.

Crea un'istanza di un provider di posizione del parco risorse

La libreria di monitoraggio della flotta JavaScript include un provider di posizione che recupera più veicoli da Fleet Engine.

Per eseguirne l'inizializzazione, segui questi passaggi:

1. Utilizza l'ID progetto e un riferimento al fetcher di token.

2. Utilizza una query di filtro per veicoli La query di filtro per veicoli consente di stabilire quali veicoli vengono visualizzati sulla mappa. Il filtro viene passato a Fleet Engine.

   • Per i servizi on demand, utilizza vehicleFilter e consulta ListVehiclesRequest.filter
   • Per le attività pianificate, usa deliveryVehicleFilter ed esamina ListDeliveryVehiclesRequest.filter

3. Imposta l'area delimitata per la visualizzazione del veicolo. Utilizza locationRestriction per limitare l'area in cui visualizzare i veicoli sulla mappa. Il provider di località non è attivo finché non viene impostato. Puoi impostare i limiti di località nel costruttore o dopo il costruttore.

4. Inizializza la visualizzazione mappa.

I seguenti esempi mostrano come creare un'istanza di un provider di località del parco risorse per scenari sia di attività on demand che di attività pianificate. Questi esempi mostrano anche come utilizzare locationRestriction nel costruttore per attivare il fornitore di servizi di geolocalizzazione.

Viaggi on demand

JavaScript

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

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

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

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

Attività pianificate

JavaScript

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

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately make the location provider active.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

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

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately make the location provider active.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

Per impostare locationRestriction dopo il costruttore, aggiungi locationProvider.locationRestriction più avanti nel codice come mostrato nell'esempio di JavaScript seguente.

Nota: l'esempio riguarda le attività pianificate, ma per farlo per i viaggi on demand, basta utilizzare google.maps.journeySharing.FleetEngineFleetLocationProvider.

   // You can choose to not set locationRestriction in the constructor.
   // In this case, the location provider *DOES NOT START* after this line, because
   // no locationRestriction is set.
   locationProvider = new google.maps.journeySharing.DeliveryFleetLocationProvider({
   ... // not setting locationRestriction here
   });

   // You can then set the locationRestriction *after* the constructor.
   // After this line, the location provider is active.
   locationProvider.locationRestriction = {
     north: 1,
     east: 2,
     south: 0,
     west: 1,
   };

Impostare la limitazione della località utilizzando l'area visibile della mappa

Puoi anche impostare i limiti locationRestriction in modo che corrispondano all'area attualmente visibile nella visualizzazione mappa.

Viaggi on demand

JavaScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

TypeScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

Attività pianificate

JavaScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location provider will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

TypeScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location provider will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

Inizializzare la visualizzazione mappa

Dopo aver creato il fornitore di località, inizializza la visualizzazione mappa nello stesso modo in cui segui un singolo veicolo.

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> si chiama 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 seguire il parco, devi monitorare le modifiche agli eventi e gestire gli eventuali errori che si verificano come descritto nelle sezioni seguenti.

Ascolta gli eventi di modifica

Puoi recuperare le meta informazioni sul parco risorse dall'oggetto veicolo utilizzando il fornitore di servizi di geolocalizzazione. Le modifiche alle meta informazioni attivano un evento update. Le meta informazioni includono le proprietà del veicolo, come stato di navigazione, distanza rimanente e attributi personalizzati.

Per maggiori dettagli, consulta quanto segue:

• Informazioni sulle opzioni di veicoli per le corse on demand
• Guida di riferimento alle opzioni dei veicoli per le attività pianificate

Gli esempi riportati di seguito mostrano come ascoltare questi eventi di modifica.

Viaggi on demand

JavaScript

locationProvider.addListener('update', e => {
  // e.vehicles contains data that may be
  // useful to the rest of the UI.
  for (vehicle of e.vehicles) {
    console.log(vehicle.navigationStatus);
  }
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineFleetLocationProviderUpdateEvent) => {
  // e.vehicles contains data that may be
  // useful to the rest of the UI.
  if (e.vehicles) {
    for (vehicle of e.vehicles) {
      console.log(vehicle.navigationStatus);
    }
  }
});

Attività pianificate

JavaScript

locationProvider.addListener('update', e => {
  // e.deliveryVehicles contains data that may be
  // useful to the rest of the UI.
  if (e.deliveryVehicles) {
    for (vehicle of e.deliveryVehicles) {
      console.log(vehicle.remainingDistanceMeters);
    }
  }
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineDeliveryFleetLocationProviderUpdateEvent) => {
  // e.deliveryVehicles contains data that may be
  // useful to the rest of the UI.
  if (e.deliveryVehicles) {
    for (vehicle of e.deliveryVehicles) {
      console.log(vehicle.remainingDistanceMeters);
    }
  }
});

Ascolta gli errori

Inoltre, devi rilevare e gestire gli errori che si verificano durante il monitoraggio di un veicolo. Gli errori che si verificano in modo asincrono dalla richiesta di informazioni sul veicolo attivano eventi di errore.

L'esempio seguente mostra come ascoltare questi eventi per gestire gli errori.

JavaScript

locationProvider.addListener('error', e => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

TypeScript

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

Interrompi il monitoraggio del parco risorse

Per interrompere il monitoraggio del parco risorse, imposta i limiti del fornitore di posizione su null e poi rimuovi il fornitore di posizione dalla visualizzazione mappa come descritto nelle sezioni seguenti.

Imposta i limiti del fornitore di servizi di geolocalizzazione su null

Per impedire al provider di geolocalizzazione di monitorare la flotta, imposta i limiti del provider su null.

Viaggi on demand

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

Attività pianificate

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

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

Monitorare un veicolo di consegna durante la visualizzazione di un parco veicoli di consegna

Se utilizzi i servizi di mobilità per le attività pianificate, puoi visualizzare un parco veicoli e mostrare il percorso e le attività imminenti per un determinato veicolo di consegna nella stessa visualizzazione mappa. Per farlo, crea un Provider di posizione del parco veicoli di consegna e un Provider di posizione del veicolo di consegna e aggiungili entrambi alla visualizzazione della mappa. Una volta creato, il provider di posizione del parco veicoli di consegna inizia a mostrare i veicoli di consegna sulla mappa. Gli esempi riportati di seguito mostrano come creare istanze di entrambi i fornitori di servizi di geolocalizzazione:

JavaScript

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [
    deliveryFleetLocationProvider,
    deliveryVehicleLocationProvider,
  ],
  // Any other options
});

TypeScript

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [
    deliveryFleetLocationProvider,
    deliveryVehicleLocationProvider,
  ],
  // Any other options
});

Utilizzare la personalizzazione degli indicatori per monitorare un veicolo di consegna

Per consentire al fornitore di dati sulla posizione dei veicoli di consegna di monitorare un veicolo di consegna quando fai clic sul relativo indicatore della flotta:

1. Personalizza un indicatore e aggiungi un'azione di clic.

2. Nascondi l'indicatore per evitare indicatori duplicati.

   Nota: il fornitore del servizio di localizzazione del parco veicoli di consegna mostra un insieme di indicatori, uno per ogni veicolo monitorato. Se vuoi mostrare i dettagli di un veicolo quando l'utente fa clic su quel veicolo, esegui l'inizializzazione di un fornitore di posizione del veicolo di consegna e imposta l'ID veicolo su quello su cui ha fatto clic l'utente, come mostrato nell'esempio seguente. Tuttavia, quando esegui questa operazione, il fornitore di servizi di localizzazione del veicolo di consegna mostra anche un indicatore per questo veicolo (come è progettato per farlo). Nascondi uno dei due indicatori in modo che non ci siano due indicatori per lo stesso veicolo.

Gli esempi di questi passaggi sono riportati nelle sezioni seguenti.

Personalizzare un indicatore e aggiungere un'azione al clic

JavaScript

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

TypeScript

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params: google.maps.journeySharing.DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

Nascondere l'indicatore per evitare indicatori duplicati

Nascondi l'indicatore del fornitore di dati sulla posizione del veicolo di consegna per evitare di visualizzare due indicatori per lo stesso veicolo:

JavaScript

// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

TypeScript

// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params: deliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

Passaggi successivi

• Applicare uno stile a una mappa