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

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

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

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

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

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

Поездки по требованию

JavaScript 

locationProvider.locationRestriction = null;

Машинопись 

locationProvider.locationRestriction = null;

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

JavaScript 

locationProvider.locationRestriction = null;

Машинопись 

locationProvider.locationRestriction = null;

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

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

JavaScript 

mapView.removeLocationProvider(locationProvider);

Машинопись 

mapView.removeLocationProvider(locationProvider);

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

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

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

Что дальше?