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

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

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

Как задать стиль ломаных линий

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

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

  2. Настроить стиль ломаных линий маршрута на основе данных. Укажите функцию настройки на основе данных отслеживания автопарка или внешних источников:

    • Данные отслеживания автопарка. Отслеживание автопарка передает функции настройки данные ломаной линии, включая данные о текущем состоянии транспортного средства. На основе этих данных можно стилизовать полилинии, например сделать объект Polyline более насыщенным или толстым, когда транспортное средство движется медленнее.

    • Внешние источники. Вы можете объединить данные отслеживания автопарка с данными из источников, не связанных с Fleet Engine, и настроить стиль объекта Polyline на основе этой информации.

    Пример можно найти в разделе Как задать стиль ломаных линий на основе данных.

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

  4. Как показать дополнительную информацию о маркере автомобиля или местоположения. Для этого можно использовать свойство infowindow. Подробнее о том, как показывать дополнительную информацию о маркере транспортного средства или местоположения…

Варианты настройки ломаных линий

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

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

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

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

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

JavaScript

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

TypeScript

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

TypeScript

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

TypeScript

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

TypeScript

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

TypeScript

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

TypeScript

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

TypeScript

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

Дальнейшие действия