Introduzione all'SDK Consumer per JavaScript

L'SDK JavaScript ti consente di visualizzare la posizione di veicoli e luoghi di interesse monitorati su Fleet Engine. La biblioteca contiene un componente della mappa JavaScript che sostituisce direttamente per la connessione di un'entità google.maps.Map standard e di componenti dati con Fleet Engine. Con l'SDK JavaScript, puoi fornire un'esperienza animata e personalizzabile di viaggio e ordine dalla tua applicazione web.

Componenti

L'SDK JavaScript fornisce componenti per la visualizzazione di veicoli e tappe, nonché feed di dati non elaborati per l'orario di arrivo stimato del conducente o la distanza rimanente da percorrere.

Visualizzazione mappa dello stato di avanzamento dei viaggi e degli ordini

Il componente Visualizzazione mappa mostra la posizione dei veicoli e delle tappe. Se il percorso per un veicolo è noto, il componente Visualizzazione mappa si anima del veicolo mentre si sposta lungo il percorso previsto.

Fornitore di luoghi di viaggio

L'SDK JavaScript include una posizione di viaggio che inserisce le informazioni sulla posizione per gli oggetti monitorati in la mappa di avanzamento del percorso e dell'ordine.

Puoi utilizzare il fornitore della posizione di viaggio per monitorare:

  • Il punto di partenza o di arrivo di una corsa.
  • La posizione e il percorso del veicolo assegnato alla corsa.

Oggetti posizione monitorati

Il fornitore della posizione monitora la posizione di oggetti come tappe e veicoli.

Località di partenza

La località di partenza è il luogo da cui inizia un viaggio. Contrassegna il punto di prelievo.

Località di destinazione

La località di destinazione è il luogo in cui termina un viaggio. Contrassegna il punto di consegna.

Posizione waypoint

La posizione di una tappa è qualsiasi luogo lungo il percorso di un viaggio monitorato. Ad esempio, ogni fermata del percorso dell'autobus corrisponde a una tappa.

Posizione del veicolo

La posizione del veicolo è la posizione monitorata di un veicolo. Potrebbe facoltativamente includi un percorso per il veicolo.

Recuperatore token di autenticazione

Per controllare l'accesso ai dati sulla posizione archiviati in Fleet Engine, devi implementare un servizio di minting JSON Web Token (JWT) per Fleet Engine sul tuo server. Poi implementa un fetcher di token di autenticazione come parte della tua applicazione web, utilizzando l'SDK JavaScript per autenticare l'accesso ai dati sulla posizione.

Opzioni di stile

Gli stili degli indicatori e delle polilinee determinano l'aspetto e il design del oggetti posizione monitorati sulla mappa. Puoi utilizzare la modalità opzioni di stile personalizzate per cambiare lo stile predefinito in modo che corrisponda allo stile della tua applicazione web.

Controllo della visibilità delle località monitorate

Questa sezione descrive le regole di visibilità per gli oggetti posizione monitorati sulla mappa per i provider di localizzazione predefiniti di Fleet Engine. Personalizzato o derivato i fornitori di sedi possono modificare le regole di visibilità.

Veicoli

Un veicolo di ridesharing è visibile dal momento in cui viene assegnato a una corsa al momento dell'abbandono. Se la corsa viene annullata, il veicolo è più visibile.

Tutti gli altri indicatori di posizione

Tutti gli altri indicatori di posizione per luogo di partenza, destinazione e tappe sono vengono sempre mostrati sulla mappa. Ad esempio, un punto di consegna per il ridesharing o la località di consegna di una spedizione sia sempre mostrata sulla mappa, lo stato della corsa o della consegna.

Inizia a utilizzare l'SDK JavaScript

Prima di utilizzare l'SDK JavaScript, assicurati di avere familiarità con Fleet Engine e ottenere una chiave API.

Per monitorare una corsa di ridesharing, crea prima una richiesta di ID viaggio.

Crea una rivendicazione relativa all'ID viaggio

Per monitorare un viaggio utilizzando il fornitore di località delle corse: crea un token JWT (JSON Web Token) con un'attestazione ID viaggio.

Per creare il payload JWT, aggiungi un'altra dichiarazione nella sezione Autorizzazione con la chiave tripid e imposta il suo valore sull'ID corsa.

L'esempio seguente mostra come creare un token per il monitoraggio per ID corsa:

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

Crea un fetcher di token di autenticazione

Puoi creare un fetcher di token di autenticazione per recuperare un token creato da te con le rivendicazioni appropriate sui tuoi server che utilizzano un servizio certificato dell'account di servizio per il tuo progetto. È importante eseguire il mint solo dei token sui tuoi server e non condividere mai i tuoi certificati su nessun client. Altrimenti, comprometterai la sicurezza del sistema.

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

  • Una stringa token.
  • Un numero expiresInSeconds. Un token scade in questo periodo di tempo dopo recupero.

L'SDK JavaScript consumer richiede un token tramite il token di autenticazione fetcher quando una delle seguenti condizioni è vera:

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

In caso contrario, l'SDK 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

async 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.jwt,
    expiresInSeconds: data.expirationTimestamp - Date.now(),
  };
}

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

  • L'endpoint deve restituire una data di scadenza per il token. nell'esempio in alto, viene specificato come data.ExpiresInSeconds.
  • Il fetcher del token di autenticazione deve superare la data di scadenza (in secondi, dal recupero) alla libreria, come mostrato nell'esempio.
  • SERVER_TOKEN_URL dipende dall'implementazione del tuo provider, ovvero gli URL del provider di esempio:
      .
    • https://SERVER_URL/token/driver/VEHICLEID
    • https://SERVER_URL/token/consumer/TRIPID

Carica una mappa da HTML

L'esempio seguente mostra come caricare l'SDK JavaScript da un URL specificato. Il parametro callback esegue initMap dopo il caricamento dell'API. L'attributo defer consente al browser continuare a visualizzare il 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>

Durante un viaggio

Questa sezione mostra come utilizzare l'SDK JavaScript per seguire un viaggio di ridesharing o di consegna. Assicurati di carica la libreria dalla funzione callback specificata nel tag script prima di eseguire il codice.

Creare un'istanza per il fornitore di servizi di localizzazione di un viaggio

L'SDK JavaScript predefinisce un provider di località per l'API Fleet Engine Ridesharing. Utilizza l'ID progetto e un riferimento alla tua fabbrica di token per crearla.

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineTripLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

          // Optionally, you may specify a trip ID to
          // immediately start tracking.
          tripId: 'your-trip-id',
});

TypeScript

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

          // Optionally, you may specify a trip ID to
          // immediately start tracking.
          tripId: 'your-trip-id',
});

Inizializzare la visualizzazione mappa

Dopo aver caricato l'SDK JavaScript, inizializza la visualizzazione mappa e aggiungerla alla pagina HTML. La pagina deve contenere Un elemento &lt;div&gt; contenente la visualizzazione mappa. L'elemento &lt;div&gt; è denominato map_canvas nell'esempio riportato di seguito.

Per evitare le condizioni di gara, imposta l'ID corsa per il fornitore della località nel callback che viene richiamato dopo l'inizializzazione della mappa.

JavaScript

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

// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.tripId = 'your-trip-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({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

TypeScript

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

// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
locationProvider.tripId = 'your-trip-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({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

Ascolta gli eventi di modifica

Puoi recuperare le meta informazioni su una corsa dall'oggetto attività utilizzando il fornitore di servizi di localizzazione. Le meta informazioni includono l'orario di arrivo stimato e distanza rimanente prima del ritiro o della partenza. Modifiche alle meta informazioni attivare un evento update. L'esempio seguente mostra come ascoltare questi eventi di modifica.

JavaScript

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

TypeScript

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
  // e.trip contains data that may be useful
  // to the rest of the UI.  
  console.log(e.trip.dropOffTime);
});

Gestire gli errori

Errori che si verificano in modo asincrono in seguito alla richiesta di informazioni sulla corsa. e gli eventi di errore. L'esempio seguente mostra come ascoltare questi eventi per gestire gli errori.

JavaScript

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

TypeScript

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

Nota: assicurati di aggregare le chiamate alla biblioteca in try...catch blocchi per gestire errori imprevisti.

Interrompi monitoraggio

Per impedire al fornitore di posizione di monitorare la corsa, rimuovi l'ID percorso da il fornitore della posizione.

JavaScript

locationProvider.tripId = '';

TypeScript

locationProvider.tripId = '';

Rimuovere il fornitore di 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);

Personalizzazione dell'aspetto della mappa base

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

Utilizzo della personalizzazione delle mappe basata su cloud

Personalizzazione delle mappe basata su cloud ti consente di creare e modificare gli stili di mappa per tutte le tue app che utilizzano Google Maps dalla console Google Cloud, senza richiedere modifiche al codice. Gli stili di mappa vengono salvati come ID mappa nel progetto Cloud. A applicare uno stile alla mappa dell'SDK JavaScript, specificare un mapId e qualsiasi altro mapOptions quando crei JourneySharingMapView. Impossibile modificare il campo mapId o aggiunti dopo l'istanza di JourneySharingMapView. Le seguenti mostra come attivare uno stile di mappa creato in precedenza con un l'ID mappa.

JavaScript

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

TypeScript

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

Utilizza lo stile delle mappe basato su codice

Un altro modo per personalizzare lo stile della mappa è impostare mapOptions quando crea il 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 l'SDK JavaScript, puoi personalizzare l'aspetto degli indicatori aggiunti la mappa. Ciò avviene specificando le personalizzazioni degli indicatori, L'SDK JavaScript viene poi applicato prima di aggiungere indicatori alla mappa e con ogni aggiornamento dell'indicatore.

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

Un'opzione più avanzata è specificare una funzione di personalizzazione. Personalizzazione consentono di definire lo stile degli indicatori in base ai dati, nonché di aggiungere Interattività con gli indicatori, come la gestione dei clic. Nello specifico, Viaggio e ordine L'avanzamento passa i dati alla funzione di personalizzazione del tipo di oggetto l'indicatore rappresenta: veicolo, origine, tappa o destinazione. Ciò consente lo stile degli indicatori cambia in base allo stato corrente dell'elemento indicatore per sé; ad esempio, il numero di tappe restanti fino al termine del veicolo durante il viaggio. Puoi anche eseguire l'unione con i dati provenienti da origini esterne a Fleet Engine definire lo stile dell'indicatore in base a queste informazioni.

L'SDK JavaScript fornisce i seguenti parametri di personalizzazione in FleetEngineTripLocationProviderOptions:

Modifica lo stile degli indicatori utilizzando MarkerOptions

L'esempio seguente mostra come configurare lo stile degli indicatori di veicoli con un oggetto MarkerOptions. Segui questo schema per personalizzare lo stile di utilizzando una delle personalizzazioni degli indicatori precedentemente elencate.

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

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 parametri di personalizzazione elencati in precedenza.

JavaScript

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

TypeScript

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
};

Aggiungi gestione dei clic agli indicatori

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

JavaScript

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

TypeScript

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

Utilizza personalizzazioni delle polilinee

Con l'SDK JavaScript, puoi anche personalizzare l'aspetto della corsa percorso sulla mappa. La libreria crea un google.maps.Polyline per ogni coppia di coordinate nello stato attivo o rimanente del veicolo percorso. Puoi definire lo stile degli oggetti Polyline specificando le personalizzazioni delle polilinee. La libreria, poi applica queste personalizzazioni in due situazioni: prima di aggiungere oggetti alla mappa e quando i dati utilizzati per gli oggetti sono cambiati.

Come per la personalizzazione degli indicatori, puoi specificare PolylineOptions da applicare a tutti gli oggetti Polyline corrispondenti quando creato o aggiornato.

Analogamente, puoi specificare una funzione di personalizzazione. Funzioni di personalizzazione consente 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 di dal veicolo; ad esempio, colorare l'oggetto Polyline con una tonalità più profonda oppure rendendolo più spesso quando il veicolo è più lento. Puoi partecipare anche da origini esterne a Fleet Engine e definire lo stile dell'oggetto Polyline in base a questo informazioni.

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

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 usando qualsiasi delle personalizzazioni delle polilinee 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 un oggetto Polyline attivo stili. Segui questo pattern per personalizzare lo stile di qualsiasi oggetto Polyline utilizzando uno dei parametri di personalizzazione delle polilinee elencati in precedenza.

JavaScript

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

TypeScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: TripPolylineCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints[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 creare un oggetto Polyline invisibile, imposta visible proprietà:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

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 per il veicolo seguito. Puoi usare queste informazioni per definire lo stile di Polyline a seconda della velocità del traffico:

JavaScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineTripLocationProvider.
      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) => {
    FleetEngineTripLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineTripLocationProvider.
      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: TripPolylineCustomizationFunctionParams) => {
    FleetEngineTripLocationProvider.
        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 una InfoWindow per mostrare informazioni aggiuntive su un veicolo o un indicatore di posizione.

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

JavaScript

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

locationProvider.addListener('update', e => {
  const stopsCount = e.trip.remainingWaypoints.length;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

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

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
  const stopsCount = e.trip.remainingWaypoints.length;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 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 il percorso previsto disattivando il montaggio automatico. Nell'esempio che segue mostra come disattivare l'adattamento automatico quando configuri percorso e ordine visualizzazione mappa progressiva.

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 utilizzare l'SDK JavaScript per sostituire Una mappa esistente che include indicatori o altre personalizzazioni senza perdere le personalizzazioni.

Ad esempio, supponiamo che tu abbia una pagina web con un google.maps.Map standard entità su cui viene 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, centered at Uluru
  var map = new google.maps.Map(document.getElementById('map'));
  map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

  // The marker, 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 l'SDK JavaScript:

  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 visualizzazione contiene la mappa.
  4. Sposta la 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
async 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.
  locationProvider = new google.maps.journeySharing.FleetEngineTripLocationProvider({
    projectId: "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
  });

  locationProvider.tripId = TRIP_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // The map, centered at Uluru
    var map = mapView.map;
    map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
    // The marker, 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 SDK to the API loader.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

Se effettui una corsa con specificato vicino a Uluru, ora verrà visualizzato sulla mappa.