本文档介绍了如何为您在 中使用的地图自定义路线多段线 您面向消费者用户基于网络的历程跟踪应用。
借助 Consumer SDK，您可以控制路线多段线的可见性或样式
地图上行程路线的路线多段线。SDK 会创建一个
google.maps.Polyline 对象
有效路径或剩余路径。然后，库会在
以下两种情况：
- 然后再将对象添加到地图
- 对象数据发生更改时
设置路线多段线的样式
与设置标记样式类似，您可以使用 自定义参数。在这里，您可以使用 方法：
- 最简单：使用
PolylineOptions应用于 在创建或更新Polyline对象时与它们匹配。 - 高级：指定自定义函数。
借助自定义函数，您可以根据
Fleet Engine 发送的数据。该函数可以更改每个
对象基于旅程的当前状态；例如，为
Polyline对象是较深的阴影，或在车辆正在其后加深 速度会更慢您甚至可以从 Fleet Engine 外部的来源加入 并根据该信息设置Polyline对象的样式。
自定义参数
设置路线多段线的样式时，您可以使用
FleetEngineTripLocationProviderOptions。这些参数可用于
汽车行程中的不同路径状态，如下所示：
- 已走过的路径：使用
takenPolylineCustomization。 - 曾经去过的路径：使用
activePolylineCustomization。 - 尚未走过的路径：使用
remainingPolylineCustomization。
使用 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.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};