自定义路线多段线

本文档介绍了如何为基于网络的行程跟踪应用（供消费者用户和车队运营商使用）中使用的地图自定义路线多段线。

借助 Consumer SDK，您可以控制地图上旅程路线的多段线显示情况，或设置旅程路线的多段线样式。SDK 会为旅程的有效路径或剩余路径中的每对坐标创建一个 google.maps.Polyline 对象。然后，该库会在以下两种情况下应用这些自定义设置：

  • 在将对象添加到地图之前
  • 当对象所用的数据发生变化时

设置路线多段线的样式

与设置标记样式的方式类似，您可以使用自定义参数来设置路线折线的样式。然后，您可以使用以下任一方法配置样式：

  • 最简单：使用 PolylineOptions 在创建或更新匹配的全部 Polyline 对象时应用。
  • 高级：指定自定义函数。 借助自定义函数，您可以根据 Fleet Engine 发送的数据单独设置对象的样式。该函数可以根据行程的当前状态更改每个对象的样式；例如，当车辆行驶速度较慢时，将 Polyline 对象着色为更深的色调或使其更粗。您甚至可以根据来自 Fleet Engine 以外来源的信息加入对立方，并设置 Polyline 对象的样式。

自定义参数

设置路线折线的样式时，您可以使用 FleetEngineShipmentLocationProviderOptions 中提供的参数。这些参数可提供车辆行驶过程中的不同路径状态，如下所示：

使用 PolylineOptions

以下示例展示了如何使用 PolylineOptions 为 Polyline 对象配置样式。按照此模式，使用前面列出的任何折线自定义项来自定义任何 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.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'});
      }
    }
  };

TypeScript

// 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 属性：

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};