Эта страница переведена с помощью Cloud Translation API.

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

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

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

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

Начните отслеживать флот

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

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

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

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

Используйте идентификатор вашего проекта , а также ссылку на ваш сборщик токенов.
Фильтр транспортных средств. Запрос фильтра транспортных средств определяет, какие транспортные средства отображаются на карте. Фильтр передаётся в Fleet Engine.
- Для услуг по запросу используйте vehicleFilter и просмотрите ListVehiclesRequest.filter
- Для запланированных задач используйте deliveryVehicleFilter и просмотрите ListDeliveryVehiclesRequest.filter
Установите граничную область для отображения транспортных средств . Используйте locationRestriction , чтобы ограничить область отображения транспортных средств на карте. Поставщик местоположения неактивен, пока это не будет задано. Границы местоположения можно задать либо в конструкторе, либо после него.
Инициализируйте вид карты .

В следующих примерах показано, как создать экземпляр поставщика местоположения автопарка для сценариев задач по требованию и запланированных задач. В этих примерах также показано, как использовать 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);
});

Прекратите отслеживать флот

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

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

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

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

JavaScript

locationProvider.locationRestriction = null;

Машинопись

locationProvider.locationRestriction = null;

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

JavaScript

locationProvider.locationRestriction = null;

Машинопись

locationProvider.locationRestriction = null;

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

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

JavaScript

mapView.removeLocationProvider(locationProvider);

Машинопись

mapView.removeLocationProvider(locationProvider);

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

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

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

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

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

Настройте маркер и добавьте действие по щелчку.
Скройте маркер, чтобы избежать дублирования маркеров.
Примечание: Поставщик местоположения автопарка доставки отображает набор маркеров, по одному для каждого отслеживаемого транспортного средства. Если вы хотите, чтобы отображалась информация об одном транспортном средстве при щелчке пользователя на нём, создайте поставщик местоположения транспортного средства доставки и укажите идентификатор транспортного средства, на которое нажал пользователь, как показано в следующем примере. Однако при этом поставщик местоположения транспортного средства доставки также отображает маркер для этого транспортного средства (как и задумано). Таким образом, один из маркеров скрывается, чтобы не было двух маркеров для одного и того же транспортного средства.

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

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

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

Что дальше?

Оформите карту

Посмотреть автопарк Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Начните отслеживать флот

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

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

JavaScript

Машинопись

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

JavaScript

Машинопись

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

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

JavaScript

Машинопись

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

JavaScript

Машинопись

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

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

JavaScript

Машинопись

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

JavaScript

Машинопись

Прослушивание событий и обработка ошибок

Прослушивание событий изменения

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

JavaScript

Машинопись

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

JavaScript

Машинопись

Прослушивание на предмет ошибок

JavaScript

Машинопись

Прекратите отслеживать флот

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

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

JavaScript

Машинопись

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

JavaScript

Машинопись

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

JavaScript

Машинопись

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

JavaScript

Машинопись

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

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

JavaScript

Машинопись

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

JavaScript

Машинопись

Что дальше?

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