Seguire una corsa in JavaScript

Seleziona la piattaforma: Android iOS JavaScript

Quando condividi un percorso, la tua app consumer mostra la posizione del veicolo appropriato per il consumatore. Per farlo, la tua app deve avviare la condivisione aggiornare il percorso durante il viaggio, nonché interrompere la condivisione una volta completato il percorso.

Questo documento illustra i seguenti passaggi chiave della procedura:

  1. Configurare una mappa
  2. Inizializza una mappa e visualizza il percorso condiviso
  3. Aggiorna e segui la posizione del percorso
  4. Interrompi condivisione percorso
  5. Gestire gli errori di condivisione dei percorsi

Configurare una mappa

Per seguire un ritiro o una consegna di una spedizione nella tua app web, devi caricare una mappa e creare un'istanza dell'SDK consumer per iniziare a monitorare il tuo percorso. Puoi caricare puoi creare una nuova mappa o utilizzarne una esistente. Poi userai il modello di inizializzazione per creare un'istanza dell'SDK consumer in modo che la vista mappa corrisponda posizione dell'elemento monitorato.

Carica una nuova mappa utilizzando l'API Google Maps JavaScript

Per creare una nuova mappa, carica l'API Google Maps JavaScript nell'app web. La l'esempio seguente mostra come caricare l'API Google Maps JavaScript, abilitare il metodo SDK e attivare il controllo di inizializzazione.

  • Il parametro callback esegue la funzione initMap dopo il caricamento dell'API.
  • L'attributo defer consente al browser di continuare a visualizzare il resto dei tuoi durante il caricamento dell'API.

Usa la funzione initMap per creare un'istanza dell'SDK consumer. Ad esempio:

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>

Carica una mappa esistente

Puoi anche caricare una mappa esistente creata con l'API Google Maps JavaScript, come quella già in uso.

Ad esempio, supponiamo che tu abbia una pagina web con un google.maps.Map standard su cui viene visualizzato un indicatore, come definito nel seguente codice HTML. Questo mostra la mappa utilizzando la stessa funzione initMap nel callback alla fine:

    <!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 Pier 39 in San Francisco
          var pier39 = {lat: 37.809326, lng: -122.409981};
          // 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 Pier 39
          var marker = new google.maps.Marker({position: pier39, map: map});
        }
        </script>
        <!-- Load the API from the specified URL.
           * The defer attribute allows the browser to render the page while the API loads.
           * The key parameter contains your own API key.
           * 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>

Sostituire una mappa esistente

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

Ad esempio, se hai una pagina web con un google.maps.Map standard su cui viene visualizzato un indicatore, puoi sostituire la mappa e mantenere l'indicatore. In questa sezione vengono descritti i passaggi da seguire.

Per sostituire la mappa e mantenere le personalizzazioni, aggiungi la condivisione del percorso a la tua pagina HTML seguendo questi passaggi, numerati anche nell'esempio in cui che segue:

  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 mappa.

  4. Sposta la personalizzazione nella funzione di callback per la visualizzazione mappa durante l'inizializzazione.

  5. Aggiungi la libreria di località al caricatore API.

L'esempio seguente mostra le modifiche da apportare. Se effettui una corsa con l'ID specificato vicino a Uluru, ora viene visualizzato sulla mappa:

    <!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 Pier 39 in San Francisco
        var pier39 = {lat: 37.809326, lng: -122.409981};
        // 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 Pier 39
        var marker = new google.maps.Marker({position: pier39, 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>

Inizializza una mappa e visualizza il percorso condiviso

Quando un percorso inizia, la tua app deve creare un'istanza del fornitore di posizione del viaggio e poi inizializza una mappa per iniziare la condivisione del percorso. Consulta le seguenti sezioni per consultare alcuni esempi.

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

L'SDK JavaScript ha un provider di posizione predefinito 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: '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',
});

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 <div> contenente la visualizzazione mappa. L'elemento <div> è denominato map_canvas nell'esempio seguente.

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 trip ID in the location
// provider constructor, you may do so here.
// Location tracking starts 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 choose.
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.
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // 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 starts 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 choose.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

Aggiorna e segui la posizione del percorso

L'app deve rilevare gli eventi e aggiornare lo stato di avanzamento del percorso come percorso avanza. 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);
});

Interrompi condivisione percorso

Al termine del percorso, devi interrompere il monitoraggio del monitoraggio percorso. Per farlo, rimuovi l'ID viaggio e fornitore di servizi di localizzazione. Consulta le sezioni seguenti per alcuni esempi.

Rimuovi l'ID viaggio dal fornitore di posizione

L'esempio seguente mostra come rimuovere un ID corsa dal fornitore di 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);

Gestire gli errori di condivisione dei percorsi

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

Passaggi successivi

Applicare uno stile a una mappa