本文件說明如何自訂追蹤路線的外觀和風格
並在地圖上顯示車輛路線是以折線形式繪製在地圖上。針對每組
車輛活躍或剩餘路徑中的座標，程式庫就會建立
google.maps.Polyline 物件。
您可以指定會自訂的折線自訂項目，藉此設定 Polyline 物件的樣式
程式庫會在以下兩種情況中套用：
- 在將物件加入地圖之前
- 當物件使用的資料有所變更時
設定折線樣式
與自訂標記的方式類似，只要在 方法如下：
依類型設定路線折線的樣式：使用
PolylineOptions才會套用至所有相符Polyline物件 如需範例，請參閱「依類型設定折線樣式」。根據資料設定路線折線的樣式：指定自訂函式 根據機群追蹤資料或其他外部來源的資料計算而得：
機群追蹤資料：車隊追蹤功能會將折線資料傳送至 自訂功能，包括目前車輛的資料 時間。您可以根據這些資料設定折線的樣式，包括著色。
Polyline物件是更深層的陰影，或當物件位於 車輛移動速度較慢外部來源：您可以將機群追蹤資料與以下來源的資料結合： 並根據該資訊設定
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();