Отслеживайте свой автопарк с помощью JavaScript-библиотеки отслеживания автопарка

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

Компоненты

Библиотека отслеживания автопарка JavaScript предоставляет компоненты для визуализации транспортных средств и остановок доставки, а также потоки необработанных данных о расчетном времени прибытия или оставшемся расстоянии до доставки.

Просмотр карты отслеживания флота

Компонент просмотра карты Fleet Tracking визуализирует расположение транспортных средств и задач. Если маршрут транспортного средства известен, компонент представления карты анимирует движение этого транспортного средства по прогнозируемому пути.

Поставщики местоположения

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

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

Поставщик местоположения средства доставки отображает информацию о местоположении одного средства доставки. Содержит информацию о местонахождении автомобиля, а также о задачах, которые выполнило средство доставки.

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

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

Контролируйте видимость отслеживаемых местоположений

В этом разделе описаны правила видимости отслеживаемых объектов местоположения на карте для предопределенного поставщика местоположений Fleet Engine. Пользовательские или производные поставщики местоположений могут изменять правила видимости.

Транспортные средства доставки

Транспортное средство доставки становится видимым сразу после его создания в Fleet Engine и видно на протяжении всего маршрута, независимо от его задач.

Маркеры расположения задач

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

Расположение результатов задач отображается с помощью маркеров результатов задач. Задачи с результатом УСПЕШНО отображаются с маркерами успешных задач, а все остальные задачи отображаются с маркерами неуспешных задач.

Начните работу с библиотекой отслеживания флота JavaScript

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

Создайте заявку на идентификатор задачи и идентификатор средства доставки.

Чтобы отслеживать средства доставки с помощью поставщика местонахождения средств доставки , создайте веб-токен JSON (JWT) с идентификатором задачи и утверждением идентификатора средства доставки.

Чтобы создать полезную нагрузку JWT, добавьте в раздел авторизации дополнительное утверждение с ключами Taskid и DeliveryVehicleid и установите для каждого ключа значение * . Токен должен быть создан с использованием роли IAM суперпользователя Fleet Engine Service Cloud. Обратите внимание, что это предоставляет широкий доступ для создания, чтения и изменения объектов Fleet Engine, и его следует передавать только доверенным пользователям.

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

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "superuser@yourgcpproject.iam.gserviceaccount.com",
  "sub": "superuser@yourgcpproject.iam.gserviceaccount.com",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
     "taskid": "*",
     "deliveryvehicleid": "*",
   }
}

Создайте сборщик токенов аутентификации

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

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

• Строковый token .
• Число expiresInSeconds . Срок действия токена истекает через указанное время после получения.

Библиотека отслеживания парка JavaScript запрашивает токен через сборщик токенов аутентификации, когда выполняется любое из следующих условий:

• У него нет действующего токена, например, когда он не вызвал сборщик при новой загрузке страницы или когда сборщик не вернулся с токеном.
• Срок действия полученного ранее токена истек.
• Срок действия полученного ранее токена истекает в течение одной минуты.

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

В следующем примере показано, как создать сборщик токенов аутентификации:

function authTokenFetcher(options) {
  // options is a record containing two keys called 
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.Token,
    expiresInSeconds: data.ExpiresInSeconds
  };
}

function authTokenFetcher(options: {
  serviceType: google.maps.journeySharing.FleetEngineServiceType,
  context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
  // The developer should generate the correct
  // SERVER_TOKEN_URL based on options.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.token,
    expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
  };
}

При реализации конечной точки на стороне сервера для чеканки токенов имейте в виду следующее:

• Конечная точка должна вернуть время истечения срока действия токена; в приведенном выше примере он указан как data.ExpiresInSeconds .
• Сборщик токенов аутентификации должен передать в библиотеку время истечения срока действия (в секундах с момента получения), как показано в примере.
• SERVER_TOKEN_URL зависит от реализации вашей серверной части. Это URL- адреса серверной части примера приложения :
  • https:// SERVER_URL /token/delivery_driver/ DELIVERY_VEHICLE_ID
  • https:// SERVER_URL /токен/delivery_consumer/ TRACKING_ID
  • https:// SERVER_URL /токен/fleet_reader

Загрузить карту из HTML

В следующем примере показано, как загрузить библиотеку JavaScript Journey Sharing по указанному URL-адресу. Параметр обратного вызова выполняет функцию initMap после загрузки API. Атрибут defer позволяет браузеру продолжать отображать остальную часть вашей страницы, пока загружается API.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>

Следуйте за автомобилем доставки

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

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

Библиотека отслеживания флота JavaScript заранее определяет поставщика местоположения для API доставки Fleet Engine. Используйте идентификатор своего проекта и ссылку на вашу фабрику токенов, чтобы создать его экземпляр.

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

          // Optionally, you may specify 
          // deliveryVehicleId to immediately start
          // tracking.
          deliveryVehicleId: 'your-delivery-id',
});

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

          // Optionally, you may specify
          // deliveryVehicleId to immediately start
          // tracking.
          deliveryVehicleId: 'your-delivery-id',
});

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

После загрузки библиотеки JavaScript Journey Sharing инициализируйте представление карты и добавьте его на HTML-страницу. Ваша страница должна содержать элемент <div> , который содержит представление карты. В приведенном ниже примере элемент <div> называется map_canvas .

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'), 
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// 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 wish.
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],
  // Styling customizations; see below.
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// 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 wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

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

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

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

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

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

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

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

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

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

locationProvider.deliveryVehicleId = '';

locationProvider.deliveryVehicleId = '';

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

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

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

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

В этом разделе показано, как использовать библиотеку JavaScript Journey Sharing для просмотра парка доставки. Обязательно загрузите библиотеку из функции обратного вызова, указанной в теге скрипта, прежде чем запускать код.

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

Библиотека отслеживания автопарка JavaScript заранее определяет поставщика местоположения, который получает несколько транспортных средств из API доставки FleetEngine . Используйте идентификатор проекта, а также ссылку на сборщик токенов, чтобы создать его экземпляр.

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

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

deliveryVehicleFilter определяет запрос, используемый для фильтрации транспортных средств, отображаемых на карте. Этот фильтр передается непосредственно в Fleet Engine. См. ListDeliveryVehiclesRequest.filter для получения информации о поддерживаемых форматах.

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

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

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

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

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

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

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

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

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

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

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

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

locationProvider.locationRestriction = null;

locationProvider.locationRestriction = null;

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

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

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

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

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

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

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

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

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

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

Настройте внешний вид базовой карты.

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

Используйте облачный стиль карты

Стилизация облачных карт позволяет создавать и редактировать стили карт для любого из ваших приложений, использующих Карты Google, из консоли Google Cloud, не требуя внесения каких-либо изменений в код. Стили карты сохраняются как идентификаторы карты в вашем облачном проекте. Чтобы применить стиль к карте отслеживания флота JavaScript, укажите mapId при создании JourneySharingMapView . Поле mapId нельзя изменить или добавить после создания экземпляра JourneySharingMapView . В следующем примере показано, как включить ранее созданный стиль карты с идентификатором карты.

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
});

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
});

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

Еще один способ настройки стиля карты — установить mapOptions при создании JourneySharingMapView .

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

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

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

Самая простая настройка — указать объект MarkerOptions , который будет применяться ко всем маркерам одного типа. Изменения, указанные в объекте, применяются после создания каждого маркера, перезаписывая любые параметры по умолчанию.

Более продвинутый вариант — указать функцию настройки. Функции настройки позволяют стилизовать маркеры на основе данных, а также добавлять к маркерам интерактивность, например обработку кликов. В частности, Fleet Tracking передает в функцию настройки данные о типе объекта, который представляет маркер: транспортное средство, остановка или задача. Это позволяет изменить стиль маркера в зависимости от текущего состояния самого элемента маркера; например, количество оставшихся остановок или тип задачи. Вы даже можете объединить данные из источников за пределами Fleet Engine и стилизовать маркер на основе этой информации.

Кроме того, вы можете использовать функции настройки для фильтрации видимости маркера. Для этого вызовите setVisible(false) для маркера.

Однако из соображений производительности мы рекомендуем использовать встроенную фильтрацию поставщика местоположений, например FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter . Тем не менее, если вам нужны дополнительные функции фильтрации, вы можете применить фильтрацию с помощью функции настройки.

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

• FleetEngineDeliveryVehicleLocationProviderOptions
  • deliveryVehicleMarkerCustomization
  • plannedStopMarkerCustomization
  • taskMarkerCustomization
  • taskOutcomeMarkerCustomization
• FleetEngineDeliveryFleetLocationProviderOptions
  • deliveryVehicleMarkerCustomization

Измените стиль маркеров с помощью MarkerOptions

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

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Измените стиль маркеров с помощью функций настройки.

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

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

Добавьте обработку кликов к маркерам

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

deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

Фильтровать видимые маркеры

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

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

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

С помощью библиотеки отслеживания автопарка JavaScript вы также можете настроить внешний вид маршрута следимого транспортного средства на карте. Библиотека создает объект google.maps.Polyline для каждой пары координат на активном или оставшемся пути транспортного средства. Вы можете стилизовать объекты Polyline , указав настройки полилинии. Затем библиотека применяет эти настройки в двух ситуациях: перед добавлением объектов на карту и при изменении данных, используемых для объектов.

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

Аналогичным образом вы можете указать функцию настройки. Функции настройки позволяют индивидуально стилизовать объекты на основе данных, отправленных Fleet Engine. Функция может изменить стиль каждого объекта в зависимости от текущего состояния автомобиля; например, окрасив объект Polyline в более глубокий оттенок или сделав его толще, когда автомобиль движется медленнее. Вы даже можете присоединиться к источникам за пределами Fleet Engine и стилизовать объект Polyline на основе этой информации.

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

• takenPolylineCustomization для уже пройденного пути;
• activePolylineCustomization для активно движущегося пути;
• remainingPolylineCustomization для еще не пройденного пути.

Измените стиль объектов Polyline с помощью PolylineOptions

В следующем примере показано, как настроить стиль объекта Polyline с помощью PolylineOptions . Следуйте этому шаблону, чтобы настроить стиль любого объекта Polyline , используя любую из настроек полилинии, перечисленных ранее.

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

Измените стиль объектов Polyline с помощью функций настройки.

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

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Управление видимостью объектов Polyline

По умолчанию все объекты Polyline видимы. Чтобы сделать объект Polyline невидимым, установите его visible :

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};

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

Вы можете использовать InfoWindow для отображения дополнительной информации о транспортном средстве или маркере местоположения.

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

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.deliveryVehicle) {
    const distance = 
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 2. Attach the info window to a vehicle marker.   
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  if (e.deliveryVehicle) {
    const distance = 
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 2. Attach the info window to a vehicle marker.   
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

Отключить автоматическую подгонку

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

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

Заменить существующую карту

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

Например, предположим, что у вас есть веб-страница со стандартным объектом google.maps.Map , на котором отображается маркер:

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, initially centered at Mountain View, CA.
  var map = new google.maps.Map(document.getElementById('map'));
  map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

  // The marker, now positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <!-- Load the API from the specified URL.
       * The async attribute allows the browser to render the page while the API loads.
       * The key parameter will contain your own API key (which is not needed for this tutorial).
       * The callback parameter executes the initMap() function.
    -->
    <script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Чтобы добавить библиотеку JavaScript Journey Sharing, включающую отслеживание автопарка:

1. Добавьте код для фабрики токенов аутентификации.
2. Инициализируйте поставщика местоположения в функции initMap() .
3. Инициализируйте представление карты в функции initMap() . Представление содержит карту.
4. Переместите свои настройки в функцию обратного вызова для инициализации представления карты.
5. Добавьте библиотеку местоположений в загрузчик API.

В следующем примере показаны изменения, которые необходимо внести:

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
let locationProvider;

// (1) Authentication Token Fetcher
function authTokenFetcher(options) {
  // options is a record containing two keys called 
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
      if (!response.ok) {
        throw new Error(response.statusText);
      }
      const data = await response.json();
      return {
        token: data.Token,
        expiresInSeconds: data.ExpiresInSeconds
      };
}

// Initialize and add the map
function initMap() {
  // (2) Initialize location provider. Use FleetEngineDeliveryVehicleLocationProvider
  // as appropriate.
  locationProvider = new google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProvider({
    YOUR_PROVIDER_ID,
    authTokenFetcher,
  });

  // (3) Initialize map view (which contains the map).
  const mapView = new google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map'),
    locationProviders: [locationProvider],
    // any styling options
  });

mapView.addListener('ready', () => {
  locationProvider.deliveryVehicleId = DELIVERY_VEHICLE_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // The map, initially centered at Mountain View, CA.
    var map = mapView.map;
    map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
    // The marker, now positioned at Uluru
    var marker = new google.maps.Marker({position: uluru, map: map});
  };
}
    </script>
    <!-- Load the API from the specified URL
      * The async attribute allows the browser to render the page while the API loads
      * The key parameter will contain your own API key (which is not needed for this tutorial)
      * The callback parameter executes the initMap() function
      *
      * (5) Add the journey sharing library to the API loader, which includes Fleet Tracking functionality.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

Если вы управляете транспортным средством с указанным идентификатором рядом с Улуру, оно теперь будет отображаться на карте.