Отследить транспортное средство

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

Чтобы отследить транспортное средство, выполните следующие действия:

1. Загрузите библиотеку и инициализируйте вид карты.
2. Укажите местоположение автомобиля и просмотр карты.
3. Слушайте события и обрабатывайте ошибки
4. Прекратить отслеживание

Загрузите библиотеку и инициализируйте вид карты.

Чтобы отобразить операции вашего автопарка на карте на вашей веб-странице, используйте скрипт, который вызывает карту с помощью вашего ключа API. В следующем примере показано, как это сделать из HTML:

• Источник URL : вызывает API карт Google для запроса карты с использованием вашего ключа API.

• Параметр callback : запускает функцию initMap после того, как API возвращает вызов.

• Параметр libraries : загружает библиотеку отслеживания автопарка.

• Атрибут defer : позволяет браузеру продолжать отображать остальную часть вашей страницы, пока загружается API.

  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
  

Укажите местоположение автомобиля и просмотр карты.

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

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

Библиотека отслеживания автопарка JavaScript включает поставщика местоположения для API Fleet Engine. Используйте идентификатор проекта и ссылку на сборщик токенов, чтобы создать его экземпляр, как показано в следующих примерах.

Поездки по запросу

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

Машинопись

locationProvider =
    new google.maps.journeySharing
        .FleetEngineVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

Запланированные задачи

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // deliveryVehicleId to immediately start
          // tracking.
          deliveryVehicleId: 'your-delivery-id',
});

Машинопись

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // deliveryVehicleId to immediately start
          // tracking.
          deliveryVehicleId: 'your-delivery-id',
});

Инициализировать вид карты

После загрузки библиотеки JavaScript Journey Sharing инициализируйте представление карты и добавьте его на HTML-страницу. Ваша страница должна содержать элемент <div> , который содержит представление карты. В следующих примерах элемент <div> называется map_canvas .=

Поездки по запросу

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
                        = 'your-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

Машинопись

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.VehicleId
                        = 'your-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

Запланированные задачи

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
});

// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
                        = 'your-delivery-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

Машинопись

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
});

// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
                        = 'your-delivery-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

Слушайте события и обрабатывайте ошибки

Начав отслеживать транспортное средство, вы хотите обновлять его прогресс на карте и обрабатывать ошибки по мере движения транспортного средства по маршруту.

Слушайте события автомобиля

Чтобы отслеживать ход транспортного средства для поездок по требованию или запланированных задач, вам необходимо отслеживать события изменений.

Вы получаете мета-данные из объекта vehicle или deliveryVehicle с помощью поставщика местоположения. Метаинформация включает расчетное время прибытия и оставшееся расстояние до следующей посадки или высадки автомобиля. Изменения метаинформации вызывают событие обновления в поставщике местоположений.

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

Поездки по запросу

JavaScript

locationProvider.addListener('update', e => {
  // e.vehicle contains data that may be
  // useful to the rest of the UI.
  if (e.vehicle) {
    console.log(e.vehicle.vehicleState);
  }
});

Машинопись

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  // e.vehicle contains data that may be
  // useful to the rest of the UI.
  if (e.vehicle) {
    console.log(e.vehicle.vehicleState);
  }
});

Запланированные задачи

JavaScript

locationProvider.addListener('update', e => {
  // e.deliveryVehicle contains data that may be
  // useful to the rest of the UI.
  if (e.deliveryVehicle) {
    console.log(e.deliveryVehicle.remainingDuration);
  }
});

Машинопись

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  // e.deliveryVehicle contains data that may be
  // useful to the rest of the UI.
  if (e.deliveryVehicle) {
    console.log(e.deliveryVehicle.remainingDuration);
  }
});

Обработка ошибок

После загрузки библиотеки JavaScript Journey Sharing инициализируйте представление карты и добавьте его на HTML-страницу. Ваша страница должна содержать элемент <div> , который содержит представление карты. В следующих примерах элемент <div> называется map_canvas .=

Поездки по запросу

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
                        = 'your-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

Машинопись

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.VehicleId
                        = 'your-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

Запланированные задачи

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
});

// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
                        = 'your-delivery-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

Машинопись

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
});

// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
                        = 'your-delivery-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

Перестаньте отслеживать транспортное средство

Чтобы прекратить отслеживание транспортного средства, необходимо удалить его из поставщика местоположения и удалить поставщика местоположения из представления карты, как описано в следующих разделах. Приведенные здесь примеры применимы как к командировкам по требованию, так и к реализации плановых задач.

Удаление автомобиля из провайдера местоположения

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

Поездки по запросу

JavaScript

locationProvider.vehicleId = '';

Машинопись

locationProvider.vehicleId = '';

Запланированные задачи

JavaScript

locationProvider.deliveryVehicleId = '';

Машинопись

locationProvider.deliveryVehicleId = '';

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

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

JavaScript

mapView.removeLocationProvider(locationProvider);

Машинопись

mapView.removeLocationProvider(locationProvider);

Что дальше

• Посмотреть парк доставки
• Оформление карты