本文档介绍了如何为面向消费者用户的基于 Web 的行程跟踪应用中使用的地图自定义路线多段线。
借助 Consumer SDK，您可以控制路线多段线的可见性，或为地图上行程的路线设置路线多段线的样式。该 SDK 会为行程的
活动路径或剩余路径中的每对坐标创建一个
google.maps.Polyline 对象。然后，该库会在以下两种情况下应用这些自定义设置：
- 在将对象添加到地图之前
- 当用于对象的数据发生更改时
设置路线多段线的样式
与设置标记的样式类似，您可以使用自定义参数 设置路线多段线的样式。然后，您可以使用以下方法之一配置样式：
- 最简单：使用
PolylineOptions在创建或更新 匹配的Polyline对象时将其应用于所有匹配的对象。 - 高级：指定自定义函数。
借助自定义函数，您可以根据 Fleet Engine 发送的数据单独设置对象的样式。该函数可以根据行程的当前状态更改每个对象的样式；例如，当车辆行驶速度较慢时，将
Polyline对象着色为更深的颜色深浅，或使其更粗。您甚至可以从 Fleet Engine 外部的来源进行联接，并根据该信息设置Polyline对象的样式。
自定义参数
设置路线多段线的样式时，您可以使用
FleetEngineTripLocationProviderOptions中提供的参数。这些参数提供了车辆行程中的不同路径状态，如下所示：
- 已行驶 路径：使用
takenPolylineCustomization。 - 正在行驶 路径：使用
activePolylineCustomization。 - 尚未行驶 路径：使用
remainingPolylineCustomization。
使用 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.trip.remainingWaypoints[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 route Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params: TripPolylineCustomizationFunctionParams) => {
const distance = params.trip.remainingWaypoints[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'});
}
}
};
控制路线多段线的可见性
默认情况下，所有 Polyline 对象都是可见的。如需使 Polyline 对象
不可见，请设置其 visible 属性：
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};