本文將說明如何為消費者使用者在網頁式旅程追蹤應用程式中使用的地圖，自訂路線折線。
使用 Consumer SDK，您可以控制路線折線的顯示設定，或為地圖上路線的路線設定折線樣式。SDK 會為旅程有效或剩餘路徑中的每個座標組合建立 google.maps.Polyline 物件。程式庫會在以下兩種情況下套用這些自訂項目：
- 在地圖上加入物件
- 當用於物件的資料有所變更時
設定路線折線的樣式
與標記樣式相同，您可以使用自訂參數設定路線多邊形樣式。接著，您可以使用下列任一方法設定樣式：
- 最簡單的做法：在建立或更新所有相符的
Polyline物件時，使用PolylineOptions套用。 - 進階：指定自訂函式。自訂化函式可根據 Fleet Engine 傳送的資料，為物件設定個別樣式。函式可根據行程的目前狀態變更每個物件的樣式，例如將
Polyline物件著上較深的色調，或是在車輛行駛速度較慢時使其變厚。您甚至可以彙整 Fleet Engine 以外的來源，並根據該資訊為Polyline物件設定樣式。
自訂參數
設定路線折線樣式時，您會使用 FleetEngineTripLocationProviderOptions 中提供的參數。這些參數可提供車輛行程中的不同路徑狀態，如下所示：
- 已行經路徑：使用
takenPolylineCustomization。 - 實際行經路線：使用
activePolylineCustomization。 - 尚未行經路徑：使用
remainingPolylineCustomization。
使用 PolylineOptions
以下範例說明如何使用 PolylineOptions 設定 Polyline 物件的樣式。請按照這個模式，使用上述任一多邊形自訂選項，自訂任何 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};