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

La libreria di monitoraggio del parco risorse JavaScript ti consente di visualizzare la posizione dei veicoli nelle tue flotte quasi in tempo reale. La libreria utilizza l'API On Demand Rides and Deliveries per consentire la visualizzazione dei veicoli e delle corse. La libreria di monitoraggio del parco risorse JavaScript contiene un componente mappa JavaScript che rappresenta una sostituzione diretta di un'entità google.maps.Map standard e dei componenti dati da connettere a Fleet Engine.

Componenti

La libreria di monitoraggio del parco risorse JavaScript fornisce componenti per la visualizzazione di veicoli e tappe di corsa, nonché feed di dati non elaborati per l'orario di arrivo stimato o la distanza rimanente da una corsa.

Visualizzazione mappa di Monitoraggio del parco risorse

Il componente della vista mappa di Monitoraggio parco risorse visualizza la posizione dei veicoli e le tappe del percorso. Se il percorso di un veicolo è noto, il componente Visualizzazione mappa anima quel veicolo mentre si sposta lungo il percorso previsto.

Fornitori di servizi di localizzazione

I fornitori di posizione utilizzano le informazioni memorizzate su Fleet Engine per inviare le informazioni sulla posizione degli oggetti monitorati alla mappa di condivisione del viaggio.

Fornitore di servizi di localizzazione dei veicoli

Il fornitore della posizione del veicolo mostra le informazioni sulla posizione di un singolo veicolo. Contiene informazioni sulla posizione e sulla corsa attuale assegnata al veicolo.

Fornitore di posizione del parco risorse

Il fornitore della posizione della flotta mostra le informazioni sulla posizione per più veicoli. Puoi filtrare i dati per visualizzare un veicolo specifico e la sua posizione oppure visualizzare le posizioni dei veicoli per l'intero parco dispositivi.

Controlla la visibilità delle località monitorate

Le regole di visibilità determinano quando un oggetto posizione monitorato è visibile sulla mappa per un provider di località Fleet Engine. Nota: l'utilizzo di un provider di località personalizzato o derivato potrebbe modificare le regole di visibilità.

Vehicles

Un veicolo è visibile non appena viene creato in Fleet Engine ed è visibile quando il valore di Vehicle_state è Online. Ciò significa che un veicolo può essere visibile anche quando non è assegnata alcuna corsa al veicolo.

Indicatori di posizione dei waypoint

Un indicatore di posizione della tappa indica i punti lungo il tragitto di un veicolo che inizia con il luogo di partenza e termina con la destinazione finale. Gli indicatori di posizione delle tappe possono essere definiti come segue:

• Origine: indica il luogo di partenza della corsa con il veicolo.
• Intermedio: indica i punti di sosta per la corsa con il veicolo.
• Destinazione: indica la posizione finale della corsa con il veicolo.

Le tappe pianificate dei veicoli vengono mostrate sulla mappa come indicatori di origine, intermedio e destinazione.

Inizia a utilizzare la libreria di monitoraggio del parco risorse JavaScript

Prima di utilizzare la libreria di monitoraggio del parco risorse JavaScript, assicurati di avere familiarità con Fleet Engine e con ottenere una chiave API. Crea quindi un ID corsa e una rivendicazione dell'ID veicolo.

Creare una rivendicazione relativa all'ID corsa e all'ID veicolo

Per monitorare i veicoli utilizzando il fornitore di posizioni dei veicoli, crea un token JWT (JSON Web Token) con un ID corsa e una dichiarazione per l'ID veicolo.

Per creare il payload JWT, aggiungi un'altra dichiarazione nella sezione relativa all'autorizzazione con le chiavi tripid e vehicleid e imposta value di ogni chiave su *. Il token deve essere creato utilizzando il ruolo Cloud IAM Super User del servizio Fleet Engine. Tieni presente che questa concessione 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 per veicolo e attività:

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "superuser@yourgcpproject.iam.gserviceaccount.com",
  "sub": "superuser@yourgcpproject.iam.gserviceaccount.com",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
    "tripid": "*",
    "vehicleid": "*",
  }
}

Crea un fetcher di token di autenticazione

La libreria di monitoraggio del parco risorse JavaScript richiede un token utilizzando il fetcher del token di autenticazione quando una delle seguenti condizioni è vera:

• Non ha un token valido, ad esempio se non ha chiamato il fetcher in un nuovo caricamento pagina o se il fetcher non ha restituito il fetcher con un token.
• Il token recuperato in precedenza è scaduto.
• Il token recuperato in precedenza scade un minuto dopo la scadenza.

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

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 creare token solo sui server e non condividere mai i certificati sui client. altrimenti potresti compromettere 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 in questo periodo di tempo dopo il recupero.

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

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

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, è indicato 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 e questi sono URL di esempio:
  • https://SERVER_URL/token/driver/VEHICLE_ID
  • https://SERVER_URL/token/consumer/TRIP_ID
  • https://SERVER_URL/token/fleet_reader

Carica una mappa da HTML

L'esempio seguente mostra come caricare la libreria di condivisione del percorso 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&v=beta" defer></script>

Seguire un veicolo

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

Creare un'istanza per un fornitore di servizi di localizzazione del veicolo

La JavaScript Fleet Tracking Library predefinisce un fornitore di posizione per l'API On Demand Rides and Deliveries. Utilizza l'ID progetto e un riferimento alla fabbrica di token per creare un'istanza.

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

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> che include la visualizzazione mappa. Nell'esempio riportato di seguito, l'elemento <div> si chiama map_canvas.

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

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

Ascolta gli eventi di modifica

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

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

Monitora gli errori

Gli errori che derivano in modo asincrono dalla richiesta di informazioni sul veicolo attivano eventi di errore. L'esempio seguente mostra come rimanere in ascolto di questi eventi per gestire gli errori.

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

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 di posizione di monitorare il veicolo, rimuovi l'ID veicolo dal fornitore di posizione.

locationProvider.vehicleId = '';

locationProvider.vehicleId = '';

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

Visualizzare un parco veicoli

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

Creare un'istanza per un fornitore di servizi di localizzazione della flotta di veicoli

La JavaScript Fleet Tracking Library predefinisce un fornitore di posizione che recupera più veicoli dall'API On Demand Rides and Deliveries. Usa l'ID progetto e un riferimento al fetcher di token per creare un'istanza.

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

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

vehicleFilter specifica una query utilizzata per filtrare i veicoli visualizzati sulla mappa. Questo filtro viene passato direttamente a Fleet Engine. Vedi ListVehiclesRequest per i formati supportati.

locationRestriction limita l'area in cui visualizzare i veicoli sulla mappa. e controlla se il monitoraggio della posizione è attivo o meno. Il monitoraggio della posizione non si avvierà finché non sarà impostato.

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

Impostare la limitazione di località usando l'area visibile della mappa

I limiti di locationRestriction possono essere configurati in modo da corrispondere all'area visibile nella visualizzazione mappa.

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

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

Ascolta gli eventi di modifica

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

locationProvider.addListener('update', e => {
  // 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);
    }
  }
});

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

Monitora gli errori

Gli errori che derivano in modo asincrono dalla richiesta di informazioni sul parco veicoli attivano eventi di errore. Per esempi che mostrano come rimanere in ascolto di questi eventi, consulta Ascoltare gli errori.

Interrompi monitoraggio

Per impedire al provider di posizione di monitorare il parco risorse, imposta i limiti del provider di località su null.

locationProvider.locationRestriction = null;

locationProvider.locationRestriction = null;

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

Personalizza l'aspetto della mappa base

Per personalizzare l'aspetto del componente Maps, applica uno stile alla mappa utilizzando strumenti basati su cloud o impostando le opzioni direttamente nel codice.

Utilizza la personalizzazione delle mappe basata su cloud

La Personalizzazione delle mappe basata su cloud ti consente di creare e modificare gli stili di mappa per qualsiasi app che utilizza Google Maps dalla console Google Cloud senza dover apportare modifiche al codice. Gli stili di mappa vengono salvati come ID mappa nel progetto Cloud. Per applicare uno stile alla tua mappa di monitoraggio della flotta JavaScript, specifica un mapId quando crei JourneySharingMapView. Non è possibile modificare o aggiungere il campo mapId dopo aver creato l'istanza di JourneySharingMapView. L'esempio seguente mostra come attivare uno stile di mappa creato in precedenza con un ID mappa.

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

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

Utilizza lo stile delle mappe basato su codice

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

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

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. Ciò avviene specificando le personalizzazioni degli indicatori, che verranno poi applicate dalla libreria di tracciamento del parco risorse prima di aggiungere indicatori alla mappa e a ogni aggiornamento degli indicatori.

Puoi creare una semplice personalizzazione specificando un oggetto MarkerOptions da applicare a tutti gli indicatori dello stesso tipo. Le modifiche specificate nell'oggetto vengono applicate dopo la creazione di ciascun indicatore, sovrascrivendo eventuali opzioni predefinite.

Come opzione più avanzata, puoi specificare una funzione di personalizzazione. Le funzioni di personalizzazione consentono di definire lo stile degli indicatori in base ai dati e di aggiungere interattività agli indicatori, ad esempio la gestione dei clic. Nello specifico, il monitoraggio del parco risorse trasmette i dati alla funzione di personalizzazione relative al tipo di oggetto rappresentato dall'indicatore: veicolo, fermata o attività. In questo modo, lo stile degli indicatori può cambiare in base allo stato corrente dell'elemento indicatore stesso, ad esempio al numero di fermate rimanenti o al tipo di attività. Puoi anche eseguire un'unione con i dati provenienti da origini esterne a Fleet Engine e definire lo stile dell'indicatore in base a queste informazioni.

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

Tuttavia, per migliorare le prestazioni, ti consigliamo di applicare il filtro con il filtro nativo nel provider di località, ad esempio FleetEngineFleetLocationProvider.vehicleFilter. Detto questo, se hai bisogno di ulteriori funzionalità di filtro, puoi applicare il filtro utilizzando la funzione di personalizzazione.

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

• FleetEngineVehicleLocationProviderOptions
  • vehicleMarkerCustomization
  • originMarkerCustomization
  • destinationMarkerCustomization
  • intermediateDestinationMarkerCustomization
• FleetEngineFleetLocationProviderOptions
  • vehicleMarkerCustomization

Modifica lo stile degli indicatori utilizzando MarkerOptions

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

vehicleMarkerCustomization = {
  cursor: 'grab'
};

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Modificare lo stile degli indicatori utilizzando le funzioni di personalizzazione

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

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

Aggiungi 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 dell'indicatore sopra elencati.

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

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

Filtra gli indicatori visibili

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

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
      if (remainingWaypoints > 10) {
        params.marker.setVisible(false);
      }
  };

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

Utilizza le personalizzazioni delle polilinee quando segui un veicolo

Con la libreria di tracciamento del parco risorse, puoi anche personalizzare l'aspetto 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 lo stile degli oggetti Polyline specificando le personalizzazioni delle polilinee. La libreria applica quindi queste personalizzazioni in due situazioni: prima di aggiungere oggetti alla mappa e quando i dati utilizzati per gli oggetti sono stati modificati.

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 assegnare 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 una tonalità più profonda o rendendolo più spesso quando il veicolo si muove più lentamente. Puoi anche eseguire un 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 FleetEngineVehicleLocationProviderOptions. Puoi impostare le personalizzazioni per diversi stati del percorso nel 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 viaggio attivo;
• 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 delle personalizzazioni delle polilinee elencate in precedenza.

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

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 Polyline attivo. Segui questo pattern per personalizzare lo stile di qualsiasi oggetto Polyline usando uno dei parametri di personalizzazione della polilinea elencati in precedenza.

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    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'});
      }
    }
  };

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    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:

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};

Esegui il rendering degli oggetti Polyline sensibili al traffico

Fleet Engine restituisce i dati sulla velocità del traffico per i percorsi attivi e rimanenti del veicolo seguito. Puoi utilizzare queste informazioni per definire lo stile degli oggetti Polyline in base alla velocità del traffico:

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Mostra un InfoWindow per un veicolo o un indicatore di posizione

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

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

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

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

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

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

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off.`);
    // 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 adattarsi automaticamente all'area visibile al veicolo e al percorso previsto disattivando il adattamento automatico. L'esempio seguente mostra come disattivare l'adattamento automatico quando configuri la visualizzazione mappa per la condivisione del percorso.

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

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 queste personalizzazioni.

Ad esempio, supponiamo che tu abbia una pagina web con un'entità google.maps.Map standard in cui viene mostrato 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 Oracle Park Stadium
        var oraclePark = { lat: 37.780087547237365, lng: -122.38948437884427 };,
        // 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 Oracle Park
        var marker = new google.maps.Marker({ position: oraclePark, 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 la fabbrica del token di autenticazione.
2. Inizializza un provider di località nella funzione initMap().
3. Inizializza la visualizzazione mappa nella funzione initMap(). La vista contiene la mappa.
4. Sposta la tua personalizzazione nella funzione di callback per l'inizializzazione della visualizzazione mappa.
5. Aggiungi la libreria di località al caricatore 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 FleetEngineVehicleLocationProvider
        // as appropriate.
        locationProvider = new google.maps.journeySharing.FleetEngineVehicleLocationProvider({
          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.vehicleId = VEHICLE_ID;

          // (4) Add customizations like before.

          // The location of Oracle Park
          var oraclePark = {lat: 37.77995187146094, lng: -122.38957020952795};
          // 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 Oracle Park
          var marker = new google.maps.Marker({position: oraclePark, 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&v=beta"
    ></script>
  </body>
</html>

Se guidi un veicolo con l'ID specificato vicino a Oracle Park, questo verrà visualizzato sulla mappa.