Как настроить ломаные линии маршрута

Выберите платформу: Android iOS JavaScript

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

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

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

Как настроить стиль ломаных линий маршрута

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

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

Параметры персонализации

При оформлении ломаных линий маршрутов используются параметры, указанные в FleetEngineTripLocationProviderOptions. Эти параметры позволяют задавать разные состояния маршрута транспортного средства:

Использовать помощника (PolylineOptions)

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

JavaScript

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

TypeScript

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

Как использовать функции настройки для оформления ломаных линий маршрутов

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

JavaScript

// Color the route polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.trip.remainingWaypoints[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'});
      }
    }
  };

TypeScript

// Color the route Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: TripPolylineCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints[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 невидимым, задайте его свойство visible:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};