自定义路线多段线

本文档介绍了如何在地图上自定义被跟踪车辆的路线的外观和风格。路线在地图上以多段线的形式绘制。对于车辆的有效路线或剩余路线中的每对坐标，该库都会创建一个 google.maps.Polyline 对象。您可以通过指定多段线自定义设置来设置 Polyline 对象的样式，然后库会在以下两种情况下应用这些设置：

  • 在将对象添加到地图之前
  • 用于对象的数据发生更改时

设置多段线的样式

与自定义标记类似，您可以通过不同的方式设置路线多段线的样式：

  1. 按类型设置路线多段线的样式：使用 PolylineOptions 在创建或更新所有匹配的 Polyline 对象时对其应用样式。如需查看示例，请参阅按类型设置多段线的样式。

  2. 根据数据设置路线多段线的样式：根据来自车队跟踪或外部来源的数据指定自定义函数：

    • 来自车队跟踪的数据：车队跟踪会将多段线数据传递给自定义函数，包括当前车辆状态的数据。您可以根据这些数据设置多段线的样式，包括为 Polyline 对象着色更深的阴影，或者在车辆移动速度较慢时使其更粗。

    • 外部来源：您可以将车队跟踪数据与来自车队引擎之外来源的数据组合，并根据这些信息设置 Polyline 对象的样式。

    如需查看示例，请参阅根据数据设置多段线样式。

  3. 控制路线多段线的可见性：您可以使用 visible 属性隐藏或显示多段线。如需了解详情，请参阅本指南中的控制多段线的可见性部分。

  4. 显示车辆或位置标记的更多信息：您可以使用 infowindow 属性显示更多信息。如需了解详情，请参阅本指南中的显示车辆或地点标记的其他信息。

多段线自定义选项

以下自定义选项适用于 FleetEngineVehicleLocationProviderOptions 和 FleetEngineDeliveryVehicleLocationProviderOptions。您可以为车辆行程中的不同路径状态设置自定义设置：

按类型设置路线多段线的样式

如需按类型设置路线多段线的样式，请使用 PolylineOptions 更改 Polyline 对象的样式。

以下示例展示了如何使用 PolylineOptions 为 Polyline 对象配置样式。按照此模式，使用本指南中多段线自定义选项中列出的任何路线多段线自定义来自定义任何 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();

后续步骤