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

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

Компоненты

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

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

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

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

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

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

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

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

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

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

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

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

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

Транспортное средство становится видимым, как только оно создано в Fleet Engine, и становится видимым, когда для параметра Vehicle_state установлено Online . Это означает, что транспортное средство может быть видно, даже если для него не назначена текущая поездка.

Маркеры местоположения путевых точек

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

  • Начало – указывает начальную точку поездки на автомобиле.
  • Промежуточный - указывает остановки в пути на автомобиле.
  • Пункт назначения — указывает конечное место поездки автомобиля.

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

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

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

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

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

Чтобы создать полезную нагрузку JWT, добавьте в раздел авторизации дополнительное утверждение с ключами tripid и vehicleid и установите для каждого ключа value * . Токен должен быть создан с использованием роли 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": {
    "tripid": "*",
    "vehicleid": "*",
  }
}

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

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

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

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

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

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

  • Строковый 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 /токен/драйвер/ VEHICLE_ID
    • https:// SERVER_URL /токен/потребитель/ TRIP_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&v=beta" defer></script>

Следовать за транспортным средством

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

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

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

JavaScript

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

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

Машинопись

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

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

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

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

JavaScript

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 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 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.
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

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

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

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

JavaScript

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

Машинопись

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

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

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

JavaScript

locationProvider.addListener('error', e => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

Машинопись

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

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

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

JavaScript

locationProvider.vehicleId = '';

Машинопись

locationProvider.vehicleId = '';

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

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

JavaScript

mapView.removeLocationProvider(locationProvider);

Машинопись

mapView.removeLocationProvider(locationProvider);

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

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

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

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

JavaScript

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

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

Машинопись

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

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

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

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

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

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

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

JavaScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

Машинопись

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

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

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

JavaScript

locationProvider.addListener('update', e => {
  // 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);
    }
  }
});

Машинопись

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

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

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

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

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

JavaScript

locationProvider.locationRestriction = null;

Машинопись

locationProvider.locationRestriction = null;

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

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

JavaScript

mapView.removeLocationProvider(locationProvider);

Машинопись

mapView.removeLocationProvider(locationProvider);

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

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

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

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

JavaScript

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 .

JavaScript

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) для маркера.

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

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

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

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

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Машинопись

vehicleMarkerCustomization = {
  cursor: 'grab'
};

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

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

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

Машинопись

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

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

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

JavaScript

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

Машинопись

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

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

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

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
      if (remainingWaypoints > 10) {
        params.marker.setVisible(false);
      }
  };

Машинопись

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

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

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

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

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

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

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

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

JavaScript

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

Машинопись

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

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

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

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    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: VehiclePolylineCustomizationFunctionParams) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    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 :

JavaScript

remainingPolylineCustomization = {visible: false};

Машинопись

remainingPolylineCustomization = {visible: false};

Рендеринг объектов Polyline с учетом трафика

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

JavaScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Машинопись

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

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

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

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

JavaScript

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

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

    // 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 vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off.`);
    // 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();

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

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

JavaScript

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 Oracle Park Stadium
        var oraclePark = { lat: 37.780087547237365, lng: -122.38948437884427 };,
        // 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 Oracle Park
        var marker = new google.maps.Marker({ position: oraclePark, 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 FleetEngineVehicleLocationProvider
        // as appropriate.
        locationProvider = new google.maps.journeySharing.FleetEngineVehicleLocationProvider({
          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.vehicleId = VEHICLE_ID;

          // (4) Add customizations like before.

          // The location of Oracle Park
          var oraclePark = {lat: 37.77995187146094, lng: -122.38957020952795};
          // 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 Oracle Park
          var marker = new google.maps.Marker({position: oraclePark, 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&v=beta"
    ></script>
  </body>
</html>

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