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

В этом разделе показано, как использовать библиотеку 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);

Что дальше?