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

Śledź przesyłkę

Po skonfigurowaniu pakietu SDK JavaScript Consumer do obsługi zaplanowanych zadań możesz śledzić przesyłkę za pomocą aplikacji dla konsumentów. Ten dokument zawiera te kluczowe kroki:

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

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 przesyłki. 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 SDK dla konsumentów, 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>

Utwórz instancję dostawcy lokalizacji przesyłki

Użyj dostawcy lokalizacji przesyłki wraz z zdefiniowanym wcześniej narzędziem do pobierania tokena autoryzacji, aby zacząć otrzymywać dane z Fleet Engine.

Te przykłady pokazują, jak utworzyć instancję dostawcy lokalizacji.

JavaScript

const locationProvider =
  new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
      projectId: 'your-project-id',
      authTokenFetcher: authTokenFetcher,  // the fetcher defined previously
  });

TypeScript

const locationProvider =
  new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
      projectId: 'your-project-id',
      authTokenFetcher: authTokenFetcher,  // the fetcher defined previously
  });

Wyświetlanie udostępnionej podróży

Aby wyświetlić postęp zaplanowanego zadania, zainicjuj jego widok, który ustawia ramkę mapy tak, aby odpowiadała lokalizacji śledzonej podróży. Postęp jest następnie przekazywany przez pakiet Consumer SDK po uzyskaniu informacji z Fleet Engine.

Wskazówki:

Upewnij się, że strona zawiera element <div>, który zawiera widok mapy. W tym przykładzie element <div> ma nazwę map_canvas.
Zapoznaj się z domyślnymi regułami widoczności, które Fleet Engine stosuje do śledzonych przejazdów. Możesz też skonfigurować reguły widoczności dla aktywnych zadań związanych z przesyłką pojazdu i zaplanowanych przystanków. Więcej informacji znajdziesz w artykule Dostosowywanie widoczności zadań w przewodniku Konfigurowanie zadań.

Te przykłady pokazują, jak zainicjować widok mapy.

JavaScript

function initMap() {
  const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map_canvas'),
    // Any undefined styling options use defaults.
  });

  // If you did not specify a tracking ID in the location
  // provider constructor, you may do so here.
  // Location tracking starts as soon as this is set.
  locationProvider.trackingId = 'your-tracking-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

function initMap() {
  const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map_canvas'),
   // Any undefined styling options will use defaults.
  });

  // If you did not specify a tracking ID in the location
  // provider constructor, you may do so here.
  // Location tracking starts as soon as this is set.
  locationProvider.trackingId = 'your-tracking-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);
}

Aktualizowanie postępu dostawy

Możesz nasłuchiwać zdarzeń i aktualizować postęp przesyłki w miarę jej realizacji. Użyj dostawcy lokalizacji, aby pobrać metadane z obiektu taskTrackingInfo. Zmiany metadanych wywołują zdarzenie update. Obiekt taskTrackingInfo zawiera te informacje:

Szacowany czas zakończenia
Liczba pozostałych przystanków
Pozostała odległość do miejsca odbioru lub dostawy

Poniższy przykład pokazuje, jak nasłuchiwać tych zdarzeń zmiany.

JavaScript

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

TypeScript

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

Wyświetlanie kryteriów dla wielu zadań

Pakiet SDK dla konsumentów w przypadku zaplanowanych zadań wyświetla na mapie tylko jedno zadanie na identyfikator śledzenia. Zazwyczaj jednak przypisujesz 1 identyfikator śledzenia do konkretnego produktu w dostawie, który pozostaje z nim powiązany przez cały czas jego podróży w Twoim systemie. Oznacza to, że jeden identyfikator śledzenia może być powiązany z wieloma zadaniami, np. z zadaniem odbioru, a następnie z zadaniem dostawy tej samej przesyłki lub z wieloma zadaniami nieudanej dostawy przesyłki.

Aby sobie z tym poradzić, Fleet Engine stosuje kryteria wyświetlania zadań, które znajdziesz w tabeli poniżej.

Kryteria zadania	Wynik
Otwieranie zadań odbioru
Istnieje dokładnie jeden	Wyświetlanie zadania
Istnieje wiele	Błąd generowania
Zamknięte zadania odbioru
Istnieje dokładnie jeden	Wyświetlanie zadania
Istnieje wiele (niektóre z czasami wyników)	Pokaż zadanie z najnowszym czasem wyniku
Istnieje wiele (żaden nie ma czasu wyniku)	Błąd generowania
Otwieranie zadań związanych z dostawą
Istnieje dokładnie jeden	Wyświetlanie zadania
Istnieje wiele	Błąd generowania
Zamknięte zadania dostawy
Istnieje dokładnie jeden	Wyświetlanie zadania
Istnieje wiele (niektóre z czasami wyników)	Pokaż zadanie z najnowszym czasem wyniku
Istnieje wiele (żaden nie ma czasu wyniku)	Błąd generowania

Przestawanie obserwowania przesyłki

Gdy przesyłka dotrze do miejsca docelowego lub zostanie anulowana, aplikacja konsumencka powinna przestać śledzić przesyłkę, usuwając z widoku mapy identyfikator śledzenia i dostawcę lokalizacji. Szczegółowe informacje znajdziesz w sekcjach poniżej.

Usuwanie identyfikatora śledzenia

Aby dostawca lokalizacji przestał śledzić przesyłkę, usuń identyfikator śledzenia od dostawcy lokalizacji. Poniżej znajdziesz przykłady, jak to zrobić.

JavaScript

locationProvider.trackingId = '';

TypeScript

locationProvider.trackingId = '';

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 śledzenia przesyłki

Błędy, które pojawiają się asynchronicznie w wyniku żądania informacji o przesyłce, wywołują zdarzenia error. Poniższy przykład pokazuje, jak nasłuchiwać tych zdarzeń, aby obsługiwać błędy.

JavaScript

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

TypeScript

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

Uwaga: pamiętaj, aby wywołania biblioteki umieszczać w blokach try...catch, aby obsługiwać nieprzewidziane błędy.

Co dalej?

Zmienianie stylu mapy

Śledź przesyłkę 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

Utwórz instancję dostawcy lokalizacji przesyłki

JavaScript

TypeScript

Wyświetlanie udostępnionej podróży

JavaScript

TypeScript

Aktualizowanie postępu dostawy

JavaScript

TypeScript

Wyświetlanie kryteriów dla wielu zadań

Przestawanie obserwowania przesyłki

Usuwanie identyfikatora śledzenia

JavaScript

TypeScript

Usuwanie dostawcy lokalizacji z widoku mapy

JavaScript

TypeScript

Obsługa błędów śledzenia przesyłki

JavaScript

TypeScript

Co dalej?

Śledź przesyłkę