Monitora il tuo parco risorse con la libreria di monitoraggio del parco risorse JavaScript

La libreria di monitoraggio del parco risorse JavaScript consente di visualizzare la posizione dei veicoli nei loro parchi veicoli quasi in tempo reale. La libreria utilizza l'API Deliveries per consentire la visualizzazione dei veicoli per la consegna e delle attività. Come la JavaScript Shipment Tracking Library, contiene un componente di mappa JavaScript che sostituisce direttamente un'entità google.maps.Map standard e i componenti di dati da connettere a Fleet Engine.

Componenti

La libreria di monitoraggio del parco risorse JavaScript fornisce componenti per la visualizzazione dei veicoli per le consegne e delle fermate, nonché feed di dati non elaborati per l'orario di arrivo stimato o la distanza rimanente rispetto a una consegna.

Visualizzazione mappa di monitoraggio del parco risorse

Il componente di visualizzazione mappa di Fleet Tracking mostra la posizione di veicoli e attività. Se il percorso di un veicolo è noto, il componente Visualizzazione mappa anima il veicolo mentre si muove lungo il percorso previsto.

Fornitori di servizi di geolocalizzazione

I fornitori di servizi di geolocalizzazione utilizzano le informazioni archiviate in Fleet Engine per inviare le informazioni sulla posizione degli oggetti monitorati nella mappa di condivisione del viaggio.

Fornitore della posizione del veicolo per la consegna

Il fornitore della posizione del veicolo per la consegna mostra le informazioni sulla posizione di un singolo veicolo per la consegna. Contiene informazioni sulla posizione del veicolo e sulle attività completate dal veicolo per la consegna.

Fornitore posizione parco risorse di consegna

Il fornitore della posizione del parco risorse di consegna mostra le informazioni sulla posizione di più veicoli. Puoi filtrare in base a luoghi o veicoli specifici oppure mostrare l'intero parco risorse.

Controlla la visibilità delle località monitorate

Questa sezione descrive le regole di visibilità per gli oggetti di posizione monitorati sulla mappa per il fornitore di posizione predefinito di Fleet Engine. I provider di località personalizzate o derivate possono modificare le regole di visibilità.

Veicoli per le consegne

Un veicolo per la consegna è visibile non appena viene creato in Fleet Engine ed è visibile lungo tutto il percorso, a prescindere dalle attività.

Indicatori di posizione dell'attività

Le fermate pianificate dei veicoli vengono mostrate sulla mappa come indicatori di fermata dei veicoli. Gli indicatori per le attività completate vengono visualizzati con uno stile diverso rispetto alle fermate pianificate di un veicolo.

La posizione dei risultati dell'attività viene visualizzata con gli indicatori dei risultati delle attività. Le attività con un risultato SUCCEEDED vengono visualizzate con indicatori di attività riuscite, mentre tutte le altre attività con indicatori non riusciti.

Inizia a utilizzare la libreria di monitoraggio del parco risorse JavaScript

Prima di utilizzare la libreria di monitoraggio del parco risorse JavaScript, assicurati di conoscere Fleet Engine e come ottenere una chiave API. Quindi crea una rivendicazione con l'ID attività e l'ID veicolo per la consegna.

Creare una rivendicazione con ID attività e ID veicolo per la consegna

Per monitorare i veicoli per la consegna utilizzando il fornitore di servizi di localizzazione dei veicoli per la consegna, crea un token JWT (JSON Web Token) con un ID attività e una rivendicazione dell'ID veicolo per la consegna.

Per creare il payload JWT, aggiungi un'ulteriore attestazione nella sezione di autorizzazione con le chiavi taskid e deliveryvehicleid e imposta il valore di ogni chiave su *. Il token deve essere creato utilizzando il ruolo Cloud IAM Super user servizio Fleet Engine. Tieni presente che questo concede accesso ampio per creare, leggere e modificare le entità Fleet Engine e deve essere condivisa solo con utenti attendibili.

L'esempio seguente mostra come creare un token per il monitoraggio in base a veicolo e attività:

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "[e-mail]",
  "sub": "[e-mail]",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
     "taskid": "*",
     "deliveryvehicleid": "*",
   }
}

Creare un fetcher di token di autenticazione

Puoi creare un fetcher di token di autenticazione per recuperare un token creato con le attestazioni appropriate sui tuoi server utilizzando un certificato dell'account di servizio per il tuo progetto. È importante generare solo token sui server e non condividere mai i certificati su alcun client. In caso contrario, si compromette la sicurezza del sistema.

Il fetcher deve restituire una struttura di dati con due campi, aggregati in una promessa:

• Una stringa token.
• Un numero expiresInSeconds. Un token scade dopo questo intervallo di tempo dopo il recupero.

La libreria di monitoraggio del parco risorse JavaScript richiede un token tramite il fetcher di token di autenticazione quando si verifica una delle seguenti condizioni:

• Non ha un token valido, ad esempio se non ha chiamato il fetcher su un nuovo caricamento della pagina o quando il fetcher non ha restituito un token.
• Il token recuperato in precedenza è scaduto.
• Il token recuperato in precedenza è trascorso entro un minuto dalla scadenza.

In caso contrario, la libreria utilizza il token ancora valido emesso in precedenza e non chiama il fetcher.

L'esempio seguente mostra come creare un fetcher di token di autenticazione:

JavaScript

function authTokenFetcher(options) {
  // options is a record containing two keys called 
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.Token,
    expiresInSeconds: data.ExpiresInSeconds
  };
}

TypeScript

function authTokenFetcher(options: {
  serviceType: google.maps.journeySharing.FleetEngineServiceType,
  context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
  // The developer should generate the correct
  // SERVER_TOKEN_URL based on options.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.token,
    expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
  };
}

Quando implementi l'endpoint lato server per il mining dei token, tieni presente quanto segue:

• L'endpoint deve restituire una data di scadenza per il token; nell'esempio precedente, è specificato come data.ExpiresInSeconds.
• Il fetcher del token di autenticazione deve passare la data di scadenza (in secondi, dal momento del recupero) alla libreria, come mostrato nell'esempio.
• SERVER_TOKEN_URL dipende dall'implementazione del backend; questi sono gli URL per il backend dell'app di esempio:
  • https://SERVER_URL/token/delivery_driver/DELIVERY_VEHICLE_ID
  • https://SERVER_URL/token/delivery_consumer/TRACKING_ID
  • https://SERVER_URL/token/fleet_reader

Carica una mappa da HTML

L'esempio seguente mostra come caricare la libreria di condivisione dei percorsi JavaScript da un URL specificato. Il parametro callback esegue la funzione initMap dopo il caricamento dell'API. L'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>

Segui un veicolo per la consegna

Questa sezione mostra come utilizzare la libreria di monitoraggio del parco risorse JavaScript per seguire un veicolo di consegna. Assicurati di caricare la libreria dalla funzione di callback specificata nel tag script prima di eseguire il codice.

Crea l'istanza di un fornitore di servizi per la posizione di un veicolo per le consegne

La libreria di monitoraggio del parco risorse JavaScript predefinisce un provider di località per l'API Fleet Engine Deliveries. Utilizza il tuo ID progetto e un riferimento alla fabbrica di token per creare un'istanza.

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 di condivisione del percorso JavaScript, inizializza la visualizzazione mappa e aggiungila alla pagina HTML. La pagina deve contenere un elemento <div> contenente la visualizzazione mappa. L'elemento <div> è denominato map_canvas nell'esempio riportato di seguito.

JavaScript

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'), 
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// 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 wish.
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],
  // Styling customizations; see below.
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// 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 wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

Ascoltare gli eventi di modifica

Puoi recuperare le meta informazioni su un'attività dall'oggetto deliveryVehicle utilizzando il provider di posizione. Le meta informazioni includono l'orario di arrivo stimato e la distanza rimanente prima del successivo ritiro o della consegna del veicolo. Le modifiche alle informazioni di metadati attivano un evento update. L'esempio seguente mostra come ascoltare questi eventi di modifica.

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

Ascoltare gli errori

Gli errori derivanti in modo asincrono dalla richiesta di informazioni sul veicolo per la consegna attivano eventi di errore. L'esempio seguente mostra come rimanere in ascolto di 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 monitoraggio

Per impedire al fornitore della posizione di monitorare il veicolo per la consegna, rimuovi l'ID veicolo per la consegna dal fornitore della posizione.

JavaScript

locationProvider.deliveryVehicleId = '';

TypeScript

locationProvider.deliveryVehicleId = '';

Rimuovi il fornitore della posizione dalla visualizzazione mappa

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Visualizza un parco risorse di consegna

Questa sezione mostra come utilizzare la libreria di condivisione dei percorsi JavaScript per visualizzare un parco risorse di consegna. Assicurati di caricare la libreria dalla funzione di callback specificata nel tag script prima di eseguire il codice.

Crea l'istanza di un fornitore di posizione per il parco risorse di consegna

La libreria di monitoraggio del parco risorse JavaScript predefinisce un fornitore di posizione che recupera più veicoli dall' API FleetEngine Deliveries. Utilizza l'ID progetto e come riferimento al tuo fetcher di token per creare un'istanza.

JavaScript

locationProvider =
    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"',
        });

TypeScript

locationProvider =
    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"',
        });

deliveryVehicleFilter specifica una query utilizzata per filtrare i veicoli visualizzati sulla mappa. Questo filtro viene passato direttamente a Fleet Engine. Consulta la pagina ListDeliveryVehiclesRequest.filter per conoscere i formati supportati.

locationRestriction limita l'area in cui visualizzare i veicoli sulla mappa. Controlla anche se il monitoraggio della posizione è attivo o meno. Il monitoraggio della posizione non verrà avviato finché non viene impostato.

Una volta creato il provider di località, inizializza la visualizzazione mappa.

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

I limiti locationRestriction possono essere configurati in modo che corrispondano all'area attualmente visibile nella visualizzazione mappa.

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

Ascoltare gli eventi di modifica

Puoi recuperare le meta informazioni sul parco risorse dall'oggetto deliveryVehicles utilizzando il provider di posizione. Le meta informazioni includono le proprietà del veicolo come lo stato di navigazione, la distanza rimanente e gli attributi personalizzati. Per ulteriori dettagli, consulta la documentazione di riferimento. La modifica delle informazioni meta attiva un evento update. L'esempio seguente mostra come ascoltare questi eventi di modifica.

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

Ascoltare gli errori

Gli errori che si verificano in modo asincrono dopo la richiesta di informazioni sul parco risorse di distribuzione attivano eventi di errore. Per esempi che mostrano come rimanere in ascolto di questi eventi, consulta la sezione Ascoltare gli errori.

Interrompi monitoraggio

Per impedire al fornitore della posizione di monitorare il parco risorse di consegna, imposta i limiti del fornitore della posizione su null.

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

Rimuovi il fornitore della posizione dalla visualizzazione mappa

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Monitorare un veicolo per le consegne mentre visualizzi una flotta per le consegne

Mentre visualizzi un parco risorse, puoi mostrare il percorso e le attività imminenti per un determinato veicolo per la consegna. A questo scopo, crea un'istanza di Delivery Fleet Location Provider e di Delivery Vehicle Location Provider e aggiungili entrambi alla visualizzazione mappa:

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

Il fornitore della posizione della flotta di consegna inizia a mostrare i veicoli per le consegne sulla mappa. Usa la personalizzazione degli indicatori per consentire al fornitore di posizione del veicolo per le consegne di monitorare un veicolo per le consegne quando è stato fatto clic sull'indicatore del parco risorse:

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

Nascondi l'indicatore al fornitore della posizione del veicolo per la 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);
    }
  };

Personalizza l'aspetto della mappa base

Per personalizzare l'aspetto del componente per le mappe, applica lo stile della mappa utilizzando strumenti basati su cloud o impostando le opzioni direttamente nel codice.

Utilizzare la personalizzazione delle mappe basata su cloud

La personalizzazione delle mappe basata su cloud consente di creare e modificare gli stili di mappa per qualsiasi app che utilizzano Google Maps dalla console Google Cloud senza dover apportare modifiche al codice. Gli stili di mappa vengono salvati come ID mappa nel tuo progetto Cloud. Per applicare uno stile alla mappa di monitoraggio del parco risorse JavaScript, specifica un valore mapId quando crei JourneySharingMapView. Il campo mapId non può essere modificato o aggiunto dopo aver creato un'istanza di JourneySharingMapView. Il seguente esempio mostra come attivare uno stile di mappa creato in precedenza con un ID mappa.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
});

Utilizzare gli stili di mappa basati su codice

Un altro modo per personalizzare gli stili della mappa è impostare mapOptions quando crei JourneySharingMapView.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

Utilizzare le personalizzazioni degli indicatori

Con la libreria di monitoraggio del parco risorse JavaScript, puoi personalizzare l'aspetto degli indicatori aggiunti alla mappa. Per farlo, devi specificare le personalizzazioni degli indicatori che la Fleet Tracking Library applica prima di aggiungere indicatori alla mappa e a ogni aggiornamento degli indicatori.

La personalizzazione più semplice consiste nello specificare un oggetto MarkerOptions che verrà applicato a tutti gli indicatori dello stesso tipo. Le modifiche specificate nell'oggetto vengono applicate dopo la creazione di ciascun indicatore, sovrascrivendo eventuali opzioni predefinite.

Un'opzione più avanzata consiste nello specificare una funzione di personalizzazione. Le funzioni di personalizzazione consentono di applicare uno stile agli indicatori in base ai dati e di aggiungere interattività agli indicatori, come la gestione dei clic. In particolare, il monitoraggio del parco risorse trasmette alla funzione di personalizzazione i dati relativi al tipo di oggetto rappresentato dall'indicatore: veicolo, fermata o attività. Ciò consente quindi di modificare lo stile degli indicatori in base allo stato corrente dell'elemento indicatore stesso, ad esempio il numero di fermate rimanenti o il tipo di attività. Puoi anche creare un join con dati provenienti da origini esterne a Fleet Engine e applicare uno stile all'indicatore.

Inoltre, puoi utilizzare le funzioni di personalizzazione per filtrare la visibilità degli indicatori. Per farlo, chiama setVisible(false) sull'indicatore.

Tuttavia, per motivi legati alle prestazioni, ti consigliamo di filtrare con il filtro nativo nel fornitore di località, ad esempio FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter. Tuttavia, se hai bisogno di un'ulteriore funzionalità di filtro, puoi applicare i filtri utilizzando la funzione di personalizzazione.

La libreria Monitoraggio parco risorse fornisce i seguenti parametri di personalizzazione:

• FleetEngineDeliveryVehicleLocationProviderOptions
  • deliveryVehicleMarkerCustomization
  • plannedStopMarkerCustomization
  • taskMarkerCustomization
  • taskOutcomeMarkerCustomization
• FleetEngineDeliveryFleetLocationProviderOptions
  • deliveryVehicleMarkerCustomization

Modifica lo stile degli indicatori utilizzando MarkerOptions

L'esempio seguente mostra come configurare lo stile di un indicatore di veicolo con un oggetto MarkerOptions. Segui questo pattern per personalizzare lo stile di un indicatore usando uno qualsiasi dei parametri di personalizzazione degli indicatori elencati sopra.

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Modificare lo stile degli indicatori utilizzando le funzioni di personalizzazione

L'esempio seguente mostra come configurare lo stile di un indicatore di veicolo. Segui questo pattern per personalizzare lo stile di qualsiasi indicatore utilizzando uno dei parametri di personalizzazione degli indicatori elencati sopra.

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

Aggiungere la gestione dei clic agli indicatori

L'esempio seguente mostra come aggiungere la gestione dei clic a un indicatore di veicolo. Segui questo pattern per aggiungere la gestione dei clic a qualsiasi indicatore utilizzando uno dei parametri di personalizzazione degli indicatori elencati sopra.

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

Filtra indicatori visibili

L'esempio seguente mostra come filtrare gli indicatori di veicoli visibili. Segui questo pattern per filtrare eventuali indicatori utilizzando uno dei parametri di personalizzazione degli indicatori elencati sopra.

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

Usa le personalizzazioni delle polilinee quando segui un veicolo per la consegna

Con la JavaScript Fleet Tracking Library, puoi anche personalizzare l'aspetto e il design del percorso del veicolo seguito sulla mappa. La libreria crea un oggetto google.maps.Polyline per ogni coppia di coordinate nel percorso attivo o rimanente del veicolo. Puoi definire gli oggetti Polyline specificando le personalizzazioni della polilinea. La libreria applica quindi queste personalizzazioni in due situazioni: prima di aggiungere gli oggetti alla mappa e quando i dati utilizzati per gli oggetti sono cambiati.

Come per la personalizzazione degli indicatori, puoi specificare un insieme di PolylineOptions da applicare a tutti gli oggetti Polyline corrispondenti quando vengono creati o aggiornati.

Analogamente, puoi specificare una funzione di personalizzazione. Le funzioni di personalizzazione consentono di applicare uno stile individuale agli oggetti in base ai dati inviati da Fleet Engine. La funzione può modificare lo stile di ciascun oggetto in base allo stato attuale del veicolo, ad esempio colorando l'oggetto Polyline con un colore più scuro o rendendolo più spesso quando il veicolo si muove più lentamente. Puoi anche eseguire join da origini esterne a Fleet Engine e definire lo stile dell'oggetto Polyline in base a queste informazioni.

Puoi specificare le personalizzazioni utilizzando i parametri forniti in FleetEngineDeliveryVehicleLocationProviderOptions. Puoi impostare le personalizzazioni per i diversi stati del percorso nel percorso del veicolo: già percorso, attivamente in viaggio o non ancora percorso. I parametri sono i seguenti:

• takenPolylineCustomization, per un percorso già percorso;
• activePolylineCustomization, per un percorso in movimento;
• remainingPolylineCustomization, per un percorso non ancora percorso.

Modifica lo stile di Polyline oggetti utilizzando PolylineOptions

L'esempio seguente mostra come configurare lo stile per un oggetto Polyline con PolylineOptions. Segui questo pattern per personalizzare lo stile di qualsiasi oggetto Polyline utilizzando una qualsiasi delle personalizzazioni della polilinea elencate in precedenza.

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

Modifica lo stile di Polyline oggetti utilizzando le funzioni di personalizzazione

L'esempio seguente mostra come configurare lo stile di un oggetto Polilinea attivo utilizzando una funzione di personalizzazione. Segui questo pattern per personalizzare lo stile di qualsiasi oggetto Polyline utilizzando uno dei parametri di personalizzazione della polilinea elencati in precedenza.

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Controlla la visibilità di Polyline oggetti

Per impostazione predefinita, tutti gli oggetti Polyline sono visibili. Per rendere invisibile un oggetto Polyline, imposta la relativa proprietà visible:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Mostra un InfoWindow per un veicolo o un indicatore di posizione

Puoi utilizzare un elemento InfoWindow per visualizzare ulteriori informazioni su un veicolo o un indicatore di posizione.

L'esempio seguente mostra come creare un elemento InfoWindow e attaccarlo a un indicatore di veicolo.

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.deliveryVehicle) {
    const distance = 
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 2. Attach the info window to a vehicle marker.   
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  if (e.deliveryVehicle) {
    const distance = 
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 2. Attach the info window to a vehicle marker.   
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

Disattiva adattamento automatico

Puoi impedire alla mappa di adattare automaticamente l'area visibile al veicolo e al percorso previsto disattivando l'adattamento automatico. L'esempio seguente mostra come disabilitare l'adattamento automatico quando configuri la visualizzazione mappa del percorso di condivisione.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

Sostituire una mappa esistente

Puoi sostituire una mappa esistente che include indicatori o altre personalizzazioni senza perdere quelle personalizzazioni.

Ad esempio, supponi di avere una pagina web con un'entità google.maps.Map standard sulla quale è visualizzato un indicatore:

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, initially centered at Mountain View, CA.
  var map = new google.maps.Map(document.getElementById('map'));
  map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

  // The marker, now positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <!-- Load the API from the specified URL.
       * The async attribute allows the browser to render the page while the API loads.
       * The key parameter will contain your own API key (which is not needed for this tutorial).
       * The callback parameter executes the initMap() function.
    -->
    <script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Per aggiungere la libreria di condivisione del percorso JavaScript, che include il monitoraggio del parco risorse:

1. Aggiungi il codice per il valore di fabbrica del token di autenticazione.
2. Inizializza un fornitore di servizi di localizzazione nella funzione initMap().
3. Inizializza la visualizzazione mappa nella funzione initMap(). La visualizzazione contiene la mappa.
4. Sposta la personalizzazione nella funzione di callback per l'inizializzazione della visualizzazione mappa.
5. Aggiungi la libreria delle località al caricatore dell'API.

L'esempio seguente mostra le modifiche da apportare:

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
let locationProvider;

// (1) Authentication Token Fetcher
function authTokenFetcher(options) {
  // options is a record containing two keys called 
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
      if (!response.ok) {
        throw new Error(response.statusText);
      }
      const data = await response.json();
      return {
        token: data.Token,
        expiresInSeconds: data.ExpiresInSeconds
      };
}

// Initialize and add the map
function initMap() {
  // (2) Initialize location provider. Use FleetEngineDeliveryVehicleLocationProvider
  // as appropriate.
  locationProvider = new google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProvider({
    YOUR_PROVIDER_ID,
    authTokenFetcher,
  });

  // (3) Initialize map view (which contains the map).
  const mapView = new google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map'),
    locationProviders: [locationProvider],
    // any styling options
  });

mapView.addListener('ready', () => {
  locationProvider.deliveryVehicleId = DELIVERY_VEHICLE_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // The map, initially centered at Mountain View, CA.
    var map = mapView.map;
    map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
    // The marker, now positioned at Uluru
    var marker = new google.maps.Marker({position: uluru, map: map});
  };
}
    </script>
    <!-- Load the API from the specified URL
      * The async attribute allows the browser to render the page while the API loads
      * The key parameter will contain your own API key (which is not needed for this tutorial)
      * The callback parameter executes the initMap() function
      *
      * (5) Add the journey sharing library to the API loader, which includes Fleet Tracking functionality.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

Se utilizzi un veicolo per le consegne con l'ID specificato nei pressi di Uluru, il rendering del veicolo sarà visibile sulla mappa.