本文档介绍了如何在地图上自定义所跟踪车辆的路线的外观。路线在地图上以多段线形式绘制。对于车辆的活动路径或剩余 路径 中的每对
坐标，该库都会创建一个
google.maps.Polyline 对象。
您可以通过指定多段线自定义项来设置 Polyline 对象的样式，然后该库会在以下两种情况下应用这些自定义项：
- 在将对象添加到地图之前
- 当用于对象的数据发生更改时
设置多段线的样式
与自定义标记的方式类似，您可以通过以下几种方式设置路线多段线的样式：
按类型设置路线多段线的样式：使用
PolylineOptions在创建或更新匹配的Polyline对象时将其应用于所有匹配的Polyline对象。如需查看示例，请参阅按类型设置多段线的样式。根据数据设置路线多段线的样式：指定自定义函数 根据车队跟踪数据或外部来源的数据：
车队跟踪数据：车队跟踪会将多段线数据（包括有关当前车辆 状态 的数据）传递给 自定义函数。您可以根据此数据设置多段线的样式，包括在车辆行驶速度较慢时将
Polyline对象着色为较深的阴影，或使其更粗。外部来源：您可以将车队跟踪数据与来自 Fleet Engine 外部来源的数据相结合，并根据该
Polyline对象设置样式 信息。
如需查看示例，请参阅根据数据设置多段线的样式。
控制路线多段线的可见性：您可以使用 属性隐藏或显示
visible多段线。如需了解详情，请参阅本指南中的 控制多段线的可见性。显示车辆或地点标记的其他信息： 您可以使用
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();