Настройка полилиний маршрута

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

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

• перед добавлением объектов на карту
• когда данные, используемые для объектов, изменились

Стиль полилиний маршрута

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

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

Параметры настройки

При стилизации полилиний маршрута используются параметры, предоставленные в FleetEngineShipmentLocationProviderOptions . Эти параметры предусматривают различные состояния пути движения транспортного средства, а именно:

• Уже пройденные пути: используйте takenPolylineCustomization .
• Активно пройденный путь: используйте activePolylineCustomization .
• Еще не пройденный путь: используйте remainingPolylineCustomization .

Используйте PolylineOptions

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

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

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

Используйте функции настройки для стилизации полилиний маршрута.

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

// Color the route polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    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 route Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: ShipmentPolylineCustomizationFunctionParams) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    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 невидимым, установите его visible :

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};