Ta strona została przetłumaczona przez Cloud Translation API.

JavaScript: śledzenie podróży

Wybierz platformę: Android iOS JavaScript

Gdy śledzisz przejazd, aplikacja konsumencka wyświetla lokalizację odpowiedniego pojazdu. Aby to zrobić, aplikacja musi rozpocząć śledzenie podróży, aktualizować postęp w jej trakcie i zakończyć śledzenie po jej zakończeniu.

Ten dokument opisuje te kluczowe etapy tego procesu:

Konfigurowanie mapy
Inicjowanie mapy i wyświetlanie udostępnionej podróży
Aktualizowanie i śledzenie postępów podróży
Przestawanie obserwowania podróży
Obsługa błędów podróży

Konfigurowanie mapy

Aby śledzić odbiór lub dostawę przesyłki w aplikacji internetowej, musisz wczytać mapę i utworzyć instancję pakietu Consumer SDK, aby rozpocząć śledzenie podróży. Możesz wczytać nową mapę lub użyć istniejącej. Następnie użyj funkcji inicjowania, aby utworzyć instancję pakietu SDK dla konsumentów, tak aby widok mapy odpowiadał lokalizacji śledzonego elementu.

Wczytywanie nowej mapy za pomocą interfejsu Maps JavaScript API

Aby utworzyć nową mapę, wczytaj w aplikacji internetowej interfejs Maps JavaScript API. Poniższy przykład pokazuje, jak wczytać interfejs Maps JavaScript API, włączyć pakiet SDK i wywołać sprawdzenie inicjowania.

Parametr callback uruchamia funkcję initMap po wczytaniu interfejsu API.
Atrybut defer umożliwia przeglądarce kontynuowanie renderowania pozostałej części strony podczas ładowania interfejsu API.

Aby utworzyć instancję pakietu Consumer SDK, użyj funkcji initMap. Na przykład:

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

Wczytywanie istniejącej mapy

Możesz też wczytać istniejącą mapę utworzoną za pomocą interfejsu Maps JavaScript API, np. taką, której już używasz.

Załóżmy na przykład, że masz stronę internetową ze standardowym obiektem google.maps.Map, na którym wyświetla się znacznik zdefiniowany w tym kodzie HTML: Poniżej zobaczysz mapę z użyciem tej samej funkcji initMap w wywołaniu zwrotnym na końcu:

    <!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>

Zastępowanie istniejącej mapy

Możesz zastąpić istniejącą mapę, która zawiera markery lub inne dostosowania, bez utraty tych dostosowań.

Jeśli na przykład masz stronę internetową ze standardowym elementem google.maps.Map, na którym wyświetla się znacznik, możesz zastąpić mapę, ale zachować znacznik. W tej sekcji opisujemy, jak to zrobić.

Aby zastąpić mapę i zachować dostosowania, dodaj udostępnianie podróży do strony HTML, wykonując te czynności. Są one też ponumerowane w przykładzie poniżej:

Dodaj kod fabryki tokenów uwierzytelniających.
Zainicjuj dostawcę lokalizacji w funkcji initMap().
Zainicjuj widok mapy w funkcji initMap(). Widok zawiera mapę.
Przenieś dostosowanie do funkcji wywołania zwrotnego inicjowania widoku mapy.
Dodaj bibliotekę lokalizacji do narzędzia do wczytywania interfejsu API.

Poniższy przykład pokazuje, jakie zmiany należy wprowadzić. Jeśli przejazd o podanym identyfikatorze odbywa się w pobliżu Uluru, będzie on teraz widoczny na mapie:

    <!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>

Inicjowanie mapy i wyświetlanie postępów podróży

Gdy rozpocznie się przejazd, aplikacja musi utworzyć instancję dostawcy lokalizacji przejazdu, a następnie zainicjować mapę, aby rozpocząć udostępnianie postępów przejazdu. Przykłady znajdziesz w sekcjach poniżej.

Utwórz instancję dostawcy lokalizacji przejazdu

Pakiet SDK JavaScript ma predefiniowanego dostawcę lokalizacji dla interfejsu Fleet Engine Ridesharing API. Aby go utworzyć, użyj identyfikatora projektu i odwołania do fabryki tokenów.

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

Inicjowanie widoku mapy

Po wczytaniu pakietu SDK JavaScript zainicjuj widok mapy i dodaj go do strony HTML. Strona powinna zawierać element <div>, który zawiera widok mapy. W tym przykładzie element <div> ma nazwę map_canvas.

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

Aktualizowanie i śledzenie postępów podróży

Aplikacja powinna nasłuchiwać zdarzeń i aktualizować postęp podróży w miarę jej trwania. Możesz pobrać metadane dotyczące podróży z obiektu zadania za pomocą dostawcy lokalizacji. Metadane obejmują szacowany czas dotarcia i pozostałą odległość do miejsca odbioru lub docelowego. Zmiany w metadanych wywołują zdarzenie update. Poniższy przykład pokazuje, jak nasłuchiwać tych zdarzeń zmiany.

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

Przestawanie obserwowania podróży

Po zakończeniu przejazdu musisz zatrzymać śledzenie przejazdu przez dostawcę lokalizacji. Aby to zrobić, usuń identyfikator podróży i dostawcę lokalizacji. Przykłady znajdziesz w sekcjach poniżej.

Usuwanie identyfikatora przejazdu od dostawcy lokalizacji

Poniższy przykład pokazuje, jak usunąć identyfikator podróży z usługi lokalizacyjnej.

JavaScript

locationProvider.tripId = '';

TypeScript

locationProvider.tripId = '';

Usuwanie dostawcy lokalizacji z widoku mapy

Poniższy przykład pokazuje, jak usunąć dostawcę lokalizacji z widoku mapy.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Obsługa błędów podróży

Błędy, które pojawiają się asynchronicznie w odpowiedzi na prośbę o informacje o przejazdach, wywołują zdarzenia błędów. Poniższy przykład pokazuje, jak nasłuchiwać tych zdarzeń, aby obsługiwać błędy.

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

Co dalej?

Zmienianie stylu mapy

JavaScript: śledzenie podróży Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Konfigurowanie mapy

Wczytywanie nowej mapy za pomocą interfejsu Maps JavaScript API

Wczytywanie istniejącej mapy

Zastępowanie istniejącej mapy

Inicjowanie mapy i wyświetlanie postępów podróży

Utwórz instancję dostawcy lokalizacji przejazdu

JavaScript

TypeScript

Inicjowanie widoku mapy

JavaScript

TypeScript

Aktualizowanie i śledzenie postępów podróży

JavaScript

TypeScript

Przestawanie obserwowania podróży

Usuwanie identyfikatora przejazdu od dostawcy lokalizacji

JavaScript

TypeScript

Usuwanie dostawcy lokalizacji z widoku mapy

JavaScript

TypeScript

Obsługa błędów podróży

JavaScript

TypeScript

Co dalej?

JavaScript: śledzenie podróży