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

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

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

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

Создайте карту

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

Загрузите новую карту, используя JavaScript API Google Maps.

Для создания новой карты загрузите JavaScript API Google Maps в ваше веб-приложение. В следующем примере показано, как загрузить JavaScript API Google Maps, включить 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>

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

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

Например, предположим, у вас есть веб-страница со стандартным объектом 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
  });

Отобразить совместный маршрут

Для отображения хода выполнения запланированной задачи необходимо инициализировать ее представление, которое устанавливает рамку карты в соответствии с местоположением отслеживаемого маршрута. Затем информация о ходе выполнения предоставляется 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 предоставляет следующее:

ЭТА
Количество оставшихся остановок
Оставшееся расстояние до погрузки или разгрузки

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

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

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

В потребительском 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

Машинопись

Что дальше?

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