Когда вы следите за поездкой, ваше потребительское приложение отображает потребителю местоположение соответствующего транспортного средства. Для этого вашему приложению необходимо начать отслеживать поездку, обновлять ход поездки во время поездки и перестать следить за поездкой после ее завершения.
В этом документе описаны следующие ключевые этапы этого процесса:
- Настроить карту
- Инициализируйте карту и отобразите совместное путешествие
- Обновляйте и следите за ходом поездки
- Перестаньте следить за поездкой
- Обработка ошибок в поездках
Настроить карту
Чтобы отслеживать получение или доставку груза в веб-приложении, вам необходимо загрузить карту и создать экземпляр 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>
Заменить существующую карту
Вы можете заменить существующую карту, содержащую маркеры или другие настройки, не теряя эти настройки.
Например, если у вас есть веб-страница со стандартным объектом google.maps.Map , на котором отображается маркер, вы можете заменить карту и сохранить маркер. В этом разделе описаны шаги, которые нужно сделать.
Чтобы заменить карту и сохранить настройки, добавьте информацию о путешествии на свою HTML-страницу, выполнив следующие действия, которые также пронумерованы в следующем примере:
Добавьте код для фабрики токенов аутентификации.
Инициализируйте поставщика местоположения в функции
initMap().Инициализируйте представление карты в функции
initMap(). Представление содержит карту.Переместите свои настройки в функцию обратного вызова для инициализации представления карты.
Добавьте библиотеку местоположений в загрузчик API.
В следующем примере показаны изменения, которые необходимо внести. Если вы совершаете поездку с указанным идентификатором рядом с Улуру, она теперь отображается на карте:
<!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>
let locationProvider;
// (1) Authentication Token Fetcher
async function authTokenFetcher(options) {
// options is a record containing two keys called
// serviceType and context. The developer should
// generate the correct SERVER_TOKEN_URL and request
// based on the values of these fields.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.Token,
expiresInSeconds: data.ExpiresInSeconds
};
}
// Initialize and add the map
function initMap() {
// (2) Initialize location provider.
locationProvider = new google.maps.journeySharing.FleetEngineTripLocationProvider({
projectId: "YOUR_PROVIDER_ID",
authTokenFetcher,
});
// (3) Initialize map view (which contains the map).
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map'),
locationProviders: [locationProvider],
// any styling options
});
locationProvider.tripId = TRIP_ID;
// (4) Add customizations like before.
// 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 async attribute allows the browser to render the page while the API loads
* The key parameter will contain your own API key (which is not needed for this tutorial)
* The callback parameter executes the initMap() function
*
* (5) Add the SDK to the API loader.
-->
<script defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
</script>
</body>
</html>
Инициализация карты и отображение прогресса поездки
Когда поездка начинается, вашему приложению необходимо создать экземпляр поставщика местоположения поездки, а затем инициализировать карту, чтобы начать делиться информацией о ходе поездки. Примеры см. в следующих разделах.
Создание экземпляра поставщика местоположения поездки
В SDK JavaScript имеется предопределенный поставщик местоположений для API Fleet Engine Ridesharing. Используйте идентификатор вашего проекта и ссылку на вашу фабрику токенов, чтобы создать его экземпляр.
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineTripLocationProvider({
projectId: 'your-project-id',
authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step
// Optionally, you may specify a trip ID to
// immediately start tracking.
tripId: 'your-trip-id',
});
Машинопись
locationProvider =
new google.maps.journeySharing
.FleetEngineTripLocationProvider({
projectId: 'your-project-id',
authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step
// Optionally, you may specify a trip ID to
// immediately start tracking.
tripId: 'your-trip-id',
});
Инициализировать вид карты
После загрузки JavaScript SDK инициализируйте представление карты и добавьте его на HTML-страницу. Ваша страница должна содержать элемент <div> , который содержит представление карты. В следующем примере элемент <div> называется map_canvas .
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
// Location tracking starts as soon as this is set.
locationProvider.tripId = 'your-trip-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 choose.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);
Машинопись
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
// Location tracking starts as soon as this is set.
locationProvider.tripId = 'your-trip-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 choose.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);
Обновляйте и следите за ходом поездки
Ваше приложение должно отслеживать события и обновлять информацию о ходе поездки по мере ее продвижения. Вы можете получить метаинформацию о поездке из объекта задачи с помощью поставщика местоположений. Метаинформация включает расчетное время прибытия и оставшееся расстояние до посадки или высадки. Изменения метаинформации вызывают событие обновления . В следующем примере показано, как прослушивать эти события изменения.
JavaScript
locationProvider.addListener('update', e => {
// e.trip contains data that may be useful
// to the rest of the UI.
console.log(e.trip.dropOffTime);
});
Машинопись
locationProvider.addListener('update', (e:
google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
// e.trip contains data that may be useful
// to the rest of the UI.
console.log(e.trip.dropOffTime);
});
Перестаньте следить за поездкой
Когда поездка закончится, вам необходимо запретить провайдеру местоположения отслеживать поездку. Для этого удалите идентификатор поездки и поставщика местоположения. Примеры см. в следующих разделах.
Удалите идентификатор поездки у поставщика местоположений.
В следующем примере показано, как удалить идентификатор поездки из поставщика местоположений.
JavaScript
locationProvider.tripId = '';
Машинопись
locationProvider.tripId = '';
Удалить поставщика местоположений из вида карты
В следующем примере показано, как удалить поставщика местоположений из представления карты.
JavaScript
mapView.removeLocationProvider(locationProvider);
Машинопись
mapView.removeLocationProvider(locationProvider);
Обработка ошибок в поездках
Ошибки, возникающие асинхронно при запросе информации о поездке, вызывают события ошибок. В следующем примере показано, как прослушивать эти события для обработки ошибок.
JavaScript
locationProvider.addListener('error', e => {
// e.error contains the error that triggered the
// event
console.error(e.error);
});
Машинопись
locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
// e.error contains the error that triggered the
// event
console.error(e.error);
});