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

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

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

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

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

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

  • Источник URL : вызывает API Google Maps для запроса карты с использованием вашего ключа 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);

Что дальше?