本文档介绍了如何为所跟踪的路线自定义外观和风格。
地图上显示车辆。路线会在地图上以多段线形式绘制。对于
即车辆的有效或剩余路径中的坐标,库可创建
google.maps.Polyline
对象。
您可以通过指定多段线自定义设置来为 Polyline
对象设置样式。
该库便会在以下两种情况下应用:
- 将对象添加到地图之前
- 当用于对象的数据发生更改时
设置多段线的样式
与自定义标记的方式类似,您也可以在 方法:
按类型设置路线多段线的样式:使用
PolylineOptions
应用于所有匹配的Polyline
对象,前提是这些对象 创建或更新如需查看示例,请参阅按类型设置多段线的样式。根据数据设置路线多段线的样式:指定自定义函数 根据来自车队跟踪或外部来源的数据:
来自车队跟踪的数据:车队跟踪会将多段线数据传递到 自定义功能,包括当前车辆的数据 状态。您可以根据这些数据设置多段线的样式,包括着色 为
Polyline
对象设置更深的阴影,或在 车辆行驶速度较慢外部来源:您可以将车队跟踪数据与以下来源的数据结合使用: Fleet Engine 以外的来源,并根据此设置
Polyline
对象的样式。 信息。
如需查看示例,请参阅根据数据设置多段线的样式。
控制路线多段线的可见性:您可以隐藏或显示 使用
visible
属性创建多段线。有关详情,请参阅 在本指南中,您可以控制多段线的可见性。显示车辆或位置标记的其他信息: 您可以使用
infowindow
属性显示更多信息。对于 请参阅 显示车辆或位置标记的其他信息: 本指南。
多段线自定义选项
以下自定义选项在
FleetEngineVehicleLocationProviderOptions
和
FleetEngineDeliveryVehicleLocationProviderOptions
。
您可以在车辆的
旅程:
按类型设置路线多段线的样式
若要按类型设置路线多段线的样式,请更改 Polyline
对象的样式
使用 PolylineOptions
。
以下示例展示了如何配置 Polyline
对象的样式
与 PolylineOptions
共享。遵循此模式可自定义任何图片的样式
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();