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

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

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

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

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

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

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

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

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

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

Например, предположим, что у вас есть веб-страница со стандартным объектом 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 для обработки непредвиденных ошибок.

Что дальше

Оформление карты