Эта страница переведена с помощью Cloud Translation API.

Следить за отправкой

Теперь, когда вы настроили JavaScript Consumer SDK для выполнения запланированных задач, вы готовы отслеживать отгрузку с помощью своего потребительского приложения. В этом документе рассматриваются следующие ключевые этапы этого процесса:

Инициализируйте карту и отобразите общий маршрут
Обновляйте и отслеживайте ход путешествия
Остановить отслеживание груза
Устранение ошибок отслеживания отправлений

Настроить карту

Чтобы отслеживать получение или доставку отправления в веб-приложении, необходимо загрузить карту и создать экземпляр Consumer SDK. Вы можете загрузить новую карту или использовать существующую. Затем с помощью функции инициализации создайте экземпляр Consumer SDK, чтобы карта соответствовала местоположению отслеживаемого товара.

Загрузите новую карту с помощью JavaScript API Google Maps

Чтобы создать новую карту, загрузите JavaScript API Google Карт в своё веб-приложение. В следующем примере показано, как загрузить JavaScript API Google Карт, включить SDK и запустить проверку инициализации.

Параметр callback запускает функцию initMap после загрузки API.
Атрибут defer позволяет браузеру продолжать отображать остальную часть страницы, пока загружается API.

Используйте функцию initMap для создания экземпляра Consumer SDK. Например:

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

Загрузить существующую карту

Вы также можете загрузить существующую карту, созданную с помощью Google Maps JavaScript API, например ту, которую вы уже используете.

Например, предположим, что у вас есть веб-страница со стандартной сущностью google.maps.Map , на которой отображается маркер, как определено в следующем HTML-коде. Карта отображается с использованием той же функции initMap в обратном вызове в конце:

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

Создать поставщика данных о местоположении отгрузки

Используйте поставщик местоположения отправления вместе с ранее определенным вами сборщиком токенов авторизации, чтобы начать получать данные от Fleet Engine.

В этих примерах показано, как создать экземпляр поставщика местоположения.

JavaScript

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

Машинопись

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

Показать общее путешествие

Чтобы отобразить ход выполнения запланированной задачи, инициализируйте её представление, которое задаёт рамку карты, соответствующую местоположению отслеживаемого маршрута. Информация о ходе выполнения предоставляется Consumer SDK после получения информации от Fleet Engine.

Советы :

Убедитесь, что ваша страница содержит элемент <div> с видом карты. В следующем примере элемент <div> называется map_canvas .
Обратите внимание на правила видимости по умолчанию, применяемые Fleet Engine к отслеживаемым поездкам. Вы также можете настроить правила видимости для активных задач по отгрузке транспортных средств и запланированных остановок. См. раздел «Настройка видимости задач» в руководстве «Настройка задач» .

В этих примерах показано, как инициализировать вид карты.

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

Машинопись

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

Обновить ход отправки

Вы можете отслеживать события и обновлять информацию о ходе доставки по мере её выполнения. Используйте поставщик местоположения для получения метаданных из объекта taskTrackingInfo . Изменения метаданных запускают событие обновления . Объект taskTrackingInfo предоставляет следующие данные:

ETA
Количество оставшихся остановок
Оставшееся расстояние до самовывоза или доставки

В следующем примере показано, как прослушивать эти события изменения.

JavaScript

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

Машинопись

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

Критерии отображения для нескольких задач

В Consumer SDK для запланированных задач отображается только одна задача на каждый идентификатор отслеживания на карте. Однако обычно каждому отправлению назначается один идентификатор отслеживания, который сохраняется с ним на протяжении всего пути в системе. Это означает, что один идентификатор отслеживания может быть связан с несколькими задачами, например, с задачей забора, за которой следует задача доставки той же посылки, или с несколькими невыполненными задачами доставки одной посылки.

Чтобы справиться с этой ситуацией, Fleet Engine применяет критерии отображения задач, показанные в следующей таблице.

Критерии задачи	Результат
Открытые задачи по самовывозу
Существует ровно один	Показать задачу
Множественные существуют	Сгенерировать ошибку
Закрытые задачи по вывозу
Существует ровно один	Показать задачу
Существуют несколько (некоторые с указанием времени результата)	Показать задачу с самым последним временем выполнения
Существует несколько (ни один с указанием времени результата)	Сгенерировать ошибку
Открытые задачи по доставке
Существует ровно один	Показать задачу
Множественные существуют	Сгенерировать ошибку
Закрытые задачи доставки
Существует ровно один	Показать задачу
Существуют несколько (некоторые с указанием времени результата)	Показать задачу с самым последним временем выполнения
Существует несколько (ни один с указанием времени результата)	Сгенерировать ошибку

Остановить отслеживание груза

После завершения или отмены доставки ваше клиентское приложение должно прекратить отслеживание доставки, удалив идентификатор отслеживания и поставщика местоположения с карты. Подробнее см. в следующих разделах.

Удалить идентификатор отслеживания

Чтобы запретить поставщику местоположения отслеживать отправление, удалите идентификатор отслеживания из базы данных. Примеры ниже показывают, как это сделать.

JavaScript

locationProvider.trackingId = '';

Машинопись

locationProvider.trackingId = '';

Удалить поставщика местоположения из вида карты

В следующем примере показано, как удалить поставщика местоположения из представления карты.

JavaScript

mapView.removeLocationProvider(locationProvider);

Машинопись

mapView.removeLocationProvider(locationProvider);

Устранение ошибок отслеживания отправлений

Ошибки, возникающие асинхронно при запросе информации о доставке, запускают события ошибок . В следующем примере показано, как отслеживать эти события для обработки ошибок.

JavaScript

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

Машинопись

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

Примечание: Обязательно заключите вызовы библиотеки в блоки try...catch для обработки непредвиденных ошибок.

Что дальше?

Оформите карту

Следить за отправкой Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Настроить карту

Загрузите новую карту с помощью JavaScript API Google Maps

Загрузить существующую карту

Создать поставщика данных о местоположении отгрузки

JavaScript

Машинопись

Показать общее путешествие

JavaScript

Машинопись

Обновить ход отправки

JavaScript

Машинопись

Критерии отображения для нескольких задач

Остановить отслеживание груза

Удалить идентификатор отслеживания

JavaScript

Машинопись

Удалить поставщика местоположения из вида карты

JavaScript

Машинопись

Устранение ошибок отслеживания отправлений

JavaScript

Машинопись

Что дальше?

Следить за отправкой