Эта страница переведена с помощью Cloud Translation API.

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

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

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

Стиль полилиний

Подобно тому, как вы настраиваете маркеры, вы можете стилизовать полилинии маршрута различными способами:

Стилизация полилиний маршрута по типу : используйте PolylineOptions , чтобы применить его ко всем соответствующим объектам Polyline при их создании или обновлении. Пример см. в разделе Стилизация полилиний по типу .
Стиль полилиний маршрута на основе данных : укажите функцию настройки на основе данных отслеживания автопарка или внешних источников:
- Данные системы отслеживания автопарка : система отслеживания автопарка передает данные о полилиниях в функцию настройки, включая данные о текущем состоянии транспортного средства. Вы можете задать стиль полилиний на основе этих данных, например, сделать объект Polyline более насыщенным или сделать его толще при движении транспортного средства медленнее.
- Внешние источники : вы можете объединить данные отслеживания автопарка с данными из источников за пределами Fleet Engine и оформить объект Polyline на основе этой информации.
Пример см. в разделе Стиль полилиний на основе данных .
Управление видимостью полилиний маршрута : вы можете скрыть или отобразить полилинии, используя свойство visible . Подробнее см. в разделе «Управление видимостью полилиний» данного руководства.
Отображение дополнительной информации о транспортном средстве или маркере местоположения : вы можете отобразить дополнительную информацию с помощью свойства infowindow . Подробнее см. в разделе «Отображение дополнительной информации о транспортном средстве или маркере местоположения» настоящего руководства.

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

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

Уже пройденный путь : использовать takenPolylineCustomization - Поездки по требованию , Справочник запланированных задач .
Активно движущийся путь : используйте activePolylineCustomization - Поездки по требованию , Справочник запланированных задач .
Еще не пройденный путь : использовать remainingPolylineCustomization - Поездки по требованию , Справочник запланированных задач .

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

Чтобы стилизовать маршрутные полилинии по типу, измените стиль объектов Polyline с помощью PolylineOptions .

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

Пример для поездок по требованию или запланированных задач

JavaScript

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

Машинопись

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

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

Чтобы стилизовать маршрутные полилинии с использованием данных, измените стиль объектов 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'});
      }
    }
  };

Пример запланированных задач

JavaScript

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

Пример оформления с учетом дорожной ситуации (только для поездок по запросу)

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

Управление видимостью полилиний

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

Пример для поездок по требованию или запланированных задач

JavaScript

remainingPolylineCustomization = {visible: false};

Машинопись

remainingPolylineCustomization = {visible: false};

Отобразить информационное окно для маркера транспортного средства или местоположения

Вы можете использовать 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

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

Настройка полилиний маршрута Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Стиль полилиний

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

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

Пример для поездок по требованию или запланированных задач

JavaScript

Машинопись

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

Пример поездок по требованию

JavaScript

Машинопись

Пример запланированных задач

JavaScript

Машинопись

Пример оформления с учетом дорожной ситуации (только для поездок по запросу)

JavaScript

Машинопись

Управление видимостью полилиний

Пример для поездок по требованию или запланированных задач

JavaScript

Машинопись

Отобразить информационное окно для маркера транспортного средства или местоположения

Пример поездок по требованию

JavaScript

Машинопись

Пример запланированных задач

JavaScript

Машинопись

Что дальше?

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