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

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

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

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

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

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

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

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

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

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

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 для обработки непредвиденных ошибок.

Что дальше?

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

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

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

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

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

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

JavaScript

Машинопись

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

JavaScript

Машинопись

Обновление хода отгрузки

JavaScript

Машинопись

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

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

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

JavaScript

Машинопись

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

JavaScript

Машинопись

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

JavaScript

Машинопись

Что дальше?

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