自定义路线多段线

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

通过使用方 SDK，您可以控制路线多段线的可见性或设置 地图上行程路线的路线多段线。SDK 会创建一个 google.maps.Polyline 对象 有效路径或剩余路径。然后，库会在 两种情况：

  • 然后再将对象添加到地图
  • 对象数据发生更改时

设置路线多段线的样式

与设置标记样式类似，您可以使用 自定义参数。在这里，您可以使用 方法：

  • 最简单：使用 PolylineOptions 应用于 在创建或更新 Polyline 对象时与它们匹配。
  • 高级：指定自定义函数。 借助自定义函数，您可以根据 Fleet Engine 发送的数据。该函数可以更改每个 对象基于旅程的当前状态；例如，为 Polyline 对象是较深的阴影，或在车辆正在其后加深 速度会更慢您甚至可以从 Fleet Engine 外部的来源加入 并根据该信息设置 Polyline 对象的样式。

自定义参数

设置路线多段线的样式时，您可以使用 FleetEngineShipmentLocationProviderOptions。这些参数可用于 汽车行程中的不同路径状态，如下所示：

使用 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.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};