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