Чтобы переводить контент на ваш предпочитаемый язык, Google использует технологии на основе искусственного интеллекта. Переводы от ИИ могут содержать ошибки.

Как посмотреть парк

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

TypeScript

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"',
        });

TypeScript

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

TypeScript

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

TypeScript

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

TypeScript

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

TypeScript

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

Как отслеживать события и обрабатывать ошибки

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

Как отслеживать события изменения

Вы можете получить метаданные о парке из объекта транспортного средства, используя поставщика геоданных. Изменения в метаданных вызывают событие update. Метаинформация включает свойства транспортного средства, такие как состояние навигации, оставшееся расстояние и настраиваемые атрибуты.

Дополнительную информацию можно найти в следующих статьях:

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

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

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

TypeScript

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

TypeScript

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

TypeScript

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;

TypeScript

locationProvider.locationRestriction = null;

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

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

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

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

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

TypeScript

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

TypeScript

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

TypeScript

// 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

TypeScript

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

JavaScript

TypeScript

Как ограничить область карты с помощью области просмотра

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

JavaScript

TypeScript

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

JavaScript

TypeScript

Инициализация карты

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

JavaScript

TypeScript

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

JavaScript

TypeScript

Как отслеживать события и обрабатывать ошибки

Как отслеживать события изменения

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

JavaScript

TypeScript

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

JavaScript

TypeScript

Как прослушивать ошибки

JavaScript

TypeScript

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

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

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

Как настроить маркер и добавить действие по клику

JavaScript

TypeScript

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

JavaScript

TypeScript

Дальнейшие действия

Как посмотреть парк