Посмотреть автопарк

В этом разделе показано, как использовать библиотеку отслеживания автопарка JavaScript для просмотра автопарка. Эти процедуры предполагают, что вы настроили библиотеку отслеживания автопарка и загрузили карту. Подробности см. в разделе Настройка библиотеки отслеживания парка машин JavaScript .

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

  1. Начните отслеживать автопарк .
  2. Слушайте события и обрабатывайте ошибки .
  3. Перестаньте отслеживать .
  4. Отслеживайте одно транспортное средство, просматривая автопарк .

Начните отслеживать автопарк

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

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

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

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

  1. Используйте идентификатор своего проекта , а также ссылку на сборщик токенов.

  2. Использование запроса фильтра транспортных средств Запрос фильтра транспортных средств определяет, какие транспортные средства отображаются на карте. Фильтр передается в Fleet Engine.

  3. Установите границы отображения автомобиля . Используйте locationRestriction , чтобы ограничить область отображения транспортных средств на карте. Поставщик местоположения не активен, пока он не будет установлен. Вы можете установить границы местоположения либо в конструкторе, либо после конструктора.

  4. Инициализируйте вид карты .

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

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

JavaScript 

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

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

Машинопись 

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

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

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

JavaScript 

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

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately make the location provider active.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

Машинопись 

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

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately make the location provider active.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

Чтобы установить locationRestriction после конструктора, добавьте locationProvider.locationRestriction позже в свой код, как показано в следующем примере JavaScript.

   // You can choose to not set locationRestriction in the constructor.
   // In this case, the location provider *DOES NOT START* after this line, because
   // no locationRestriction is set.
   locationProvider = new google.maps.journeySharing.DeliveryFleetLocationProvider({
   ... // not setting locationRestriction here
   });

   // You can then set the locationRestriction *after* the constructor.
   // After this line, the location provider is active.
   locationProvider.locationRestriction = {
     north: 1,
     east: 2,
     south: 0,
     west: 1,
   };

Установите ограничение местоположения с помощью окна просмотра карты.

Вы также можете установить границы locationRestriction , чтобы они соответствовали области, видимой в данный момент в представлении карты.

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

JavaScript 

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

Машинопись 

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

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

JavaScript 

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location provider will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

Машинопись 

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location provider will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

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

После создания поставщика местоположения инициализируйте представление карты так же, как вы это делаете при слежении за одним транспортным средством.

После загрузки библиотеки 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.addListener('update', e => {
  // e.vehicles contains data that may be
  // useful to the rest of the UI.
  for (vehicle of e.vehicles) {
    console.log(vehicle.navigationStatus);
  }
});

Машинопись 

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

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

JavaScript 

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

Машинопись 

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

Слушайте ошибки

Вы также хотите отслеживать и обрабатывать ошибки, возникающие при следовании за транспортным средством. Ошибки, возникающие асинхронно при запросе информации о транспортном средстве, вызывают события ошибок.

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

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);
});

Хватит следить за автопарком

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

Установите для границ поставщика местоположения значение null

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

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

JavaScript 

locationProvider.locationRestriction = null;

Машинопись 

locationProvider.locationRestriction = null;

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

JavaScript 

locationProvider.locationRestriction = null;

Машинопись 

locationProvider.locationRestriction = null;

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

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

JavaScript 

mapView.removeLocationProvider(locationProvider);

Машинопись 

mapView.removeLocationProvider(locationProvider);

Отслеживайте транспортное средство при просмотре парка доставки

Если вы используете услуги мобильности для запланированных задач, вы можете как просмотреть автопарк, так и отобразить маршрут и предстоящие задачи для конкретного средства доставки в одном и том же виде карты. Для этого создайте экземпляры поставщика местоположения парка доставки и поставщика местоположения транспортного средства доставки и добавьте их обоих в представление карты. После создания экземпляра поставщик местоположения парка доставки начинает показывать транспортные средства доставки на карте. В следующих примерах показано, как создать экземпляры обоих поставщиков местоположений:

JavaScript 

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [
    deliveryFleetLocationProvider,
    deliveryVehicleLocationProvider,
  ],
  // Any other options
});

Машинопись 

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [
    deliveryFleetLocationProvider,
    deliveryVehicleLocationProvider,
  ],
  // Any other options
});

Используйте настройку маркера для отслеживания средства доставки

Чтобы разрешить поставщику местоположения транспортного средства доставки отслеживать транспортное средство доставки, когда вы щелкаете маркер его парка, выполните следующие действия:

  1. Настройте маркер и добавьте действие щелчка.

  2. Скройте маркер, чтобы предотвратить дублирование маркеров.

Примеры этих шагов приведены в следующих разделах.

Настройте маркер и добавьте действие щелчка

JavaScript 

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

Машинопись 

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params: google.maps.journeySharing.DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

Скройте маркер, чтобы предотвратить дублирование маркеров.

Скройте маркер от поставщика местоположения транспортного средства, чтобы предотвратить отображение двух маркеров для одного и того же транспортного средства:

JavaScript 

// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

Машинопись 

// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params: deliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

Что дальше