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

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

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

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

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

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

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

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

Для его создания выполните следующие шаги:

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

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

    • Для предоставления услуг по запросу используйте vehicleFilter и ознакомьтесь с ListVehiclesRequest.filter
    • Для запланированных задач используйте deliveryVehicleFilter и ознакомьтесь с ListDeliveryVehiclesRequest.filter

  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.

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

Что дальше?