Отслеживайте свой автопарк с помощью 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 и установите для каждого ключа значение * . Токен должен быть создан с помощью роли суперпользователя Cloud IAM службы Fleet Engine . Обратите внимание, что это предоставляет широкий доступ для создания, чтения и изменения объектов 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 /token/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-библиотеку отслеживания автопарка для отслеживания транспортного средства доставки. Перед запуском кода обязательно загрузите библиотеку из функции обратного вызова, указанной в теге script .

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

Библиотека отслеживания флота 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'), 
  locationProvider: 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'),
  locationProvider: 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);
});

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

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

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

Библиотека отслеживания автопарка 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);
    }
  }
});

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

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

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

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

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

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

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

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

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

Другой способ настроить стиль карты — установить mapOptions при создании JourneySharingMapView .

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

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

Изменение стиля и видимости маршрутов

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

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

// This function is specified in the 
// JourneySharingMapView constructor's options 
// parameter.
function anticipatedRoutePolylineSetup({
    defaultPolylineOptions, defaultVisible}) {
  // If this function is not specified, the 
  // PolylineOptions object contained in 
  // defaultPolylineOptions is used to render the
  // anticipated route polyline. visible property sets the
  // polyline's visibility. Modify this object and 
  // pass it back to customize the style of the map.
  defaultPolylineOptions.strokeOpacity = 0.5;
  defaultPolylineOptions.strokeColor = 'red';
  return {
    polylineOptions: defaultPolylineOptions,
    visible: true
  };
}

// As an alternative, set static PolylineOptions to
// use for the anticipated route.
const anticipatedRoutePolylineOptionsSetup = {
  polylineOptions: {
    strokeOpacity: 0.5,
    strokeColor: 'red',
    …
  },
  visible: true,
};

// This function is specified in the 
// JourneySharingMapView constructor's options 
// parameter.
function anticipatedRoutePolylineSetup(options: {
  defaultPolylineOptions: google.maps.PolylineOptions,
  visible: boolean,
}): {
  polylineOptions: google.maps.PolylineOptions,
  visible: boolean,
} {
  // If this function is not specified, the 
  // PolylineOptions object contained in 
  // defaultPolylineOptions is used to render the
  // anticipated route polyline. visible property sets the
  // polyline's visibility. Modify this object and 
  // pass it back to customize the style of the map.
  options.defaultPolylineOptions.strokeOpacity = 0.5;
  options.defaultPolylineOptions.strokeColor = 'red';
  return {
    polylineOptions: options.defaultPolylineOptions,
    visible: true
  };
}

// As an alternative, set static PolylineOptions to
// use for the anticipated route.
const anticipatedRoutePolylineSetup = {
  polylineOptions: {
    strokeOpacity: 0.5,
    strokeColor: 'red',
    …
  },
  visible: true,
};

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

С помощью библиотеки отслеживания флота 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);
    }
  };

Отображение 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'), 
  locationProvider: locationProvider,
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'), 
  locationProvider: 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'), 
    locationProvider: 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>

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