本文說明如何在地圖上自訂追蹤車輛路線的外觀和風格。路線會以折線繪製在地圖上。針對車輛的有效或剩餘路徑中的每個座標組合，程式庫都會建立 google.maps.Polyline 物件。您可以指定多邊形自訂項目，然後在下列兩種情況下套用程式庫：
- 將物件新增至地圖之前
- 當用於物件的資料有所變更時
設定折線樣式
與自訂標記類似，您可以透過多種方式為路線折線設定樣式：
依類型設定路線折線的樣式：使用
PolylineOptions，套用至建立或更新的所有相符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();