Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

JavaScript: śledzenie podróży

Wybierz platformę: Android iOS JavaScript

Gdy śledzisz podróż, aplikacja użytkownika wyświetla użytkownikowi lokalizację odpowiedniego pojazdu. Aby to zrobić, aplikacja musi zacząć śledzić podróż, aktualizować postęp podróży w jej trakcie i przestać ją śledzić po jej zakończeniu.

Z tego dokumentu dowiesz się, jak wykonać te kluczowe czynności:

Konfigurowanie mapy
Inicjowanie mapy i wyświetlanie udostępnionej podróży
Aktualizowanie i śledzenie postępu podróży
Przestawanie śledzenia 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 Consumer SDK, tak aby widok mapy odpowiadał lokalizacji śledzonego elementu.

Wczytywanie nowej mapy za pomocą interfejsu Maps JavaScript API

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

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

Użyj funkcji initMap, aby utworzyć instancję pakietu Consumer SDK. 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 standardową encją google.maps.Map, na której jest wyświetlany znacznik zdefiniowany w poniższym kodzie HTML. Mapa jest wyświetlana za pomocą 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 znaczniki lub inne dostosowania, bez utraty tych dostosowań.

Jeśli na przykład masz stronę internetową ze standardową encją google.maps.Map, na której jest wyświetlany znacznik, możesz zastąpić mapę i 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, które są 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 modułu wczytywania interfejsu API.

Poniższy przykład pokazuje, jakie zmiany należy wprowadzić. Jeśli obsługujesz podróż z określonym identyfikatorem w pobliżu Uluru, będzie ona teraz renderowana 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ępu podróży

Gdy podróż się rozpocznie, aplikacja musi utworzyć instancję dostawcy lokalizacji podróży, a następnie zainicjować mapę, aby rozpocząć udostępnianie postępu podróży. Przykłady znajdziesz w kolejnych sekcjach.

Tworzenie instancji dostawcy lokalizacji podróży

Pakiet JavaScript SDK 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 JavaScript SDK zainicjuj widok mapy i dodaj go do strony HTML. Strona powinna zawierać element <div>, który zawiera widok mapy. Element <div> ma nazwę map_canvas w poniższym przykładzie.

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ępu podróży

Aplikacja powinna nasłuchiwać zdarzeń i aktualizować postęp podróży w miarę jej trwania. Za pomocą dostawcy lokalizacji możesz pobrać metadane podróży z obiektu zadania. Metadane obejmują szacowany czas dotarcia i pozostałą odległość przed odbiorem lub dostawą. Zmiany metadanych powodują wywołanie zdarzenia 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 śledzenia podróży

Gdy podróż się zakończy, musisz zatrzymać śledzenie podróży przez dostawcę lokalizacji. Aby to zrobić, usuń identyfikator podróży i dostawcę lokalizacji. Przykłady znajdziesz w kolejnych sekcjach.

Usuwanie identyfikatora podróży z dostawcy lokalizacji

Poniższy przykład pokazuje, jak usunąć identyfikator podróży z dostawcy lokalizacji.

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 występują asynchronicznie podczas wysyłania prośby o informacje o podróży, powodują wywołanie zdarzeń 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?

Stylizowanie 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ępu podróży

Tworzenie instancji dostawcy lokalizacji podróży

JavaScript

TypeScript

Inicjowanie widoku mapy

JavaScript

TypeScript

Aktualizowanie i śledzenie postępu podróży

JavaScript

TypeScript

Przestawanie śledzenia podróży

Usuwanie identyfikatora podróży z 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