本文件說明如何為消費者使用者在網頁版旅程追蹤應用程式中使用的地圖，自訂路線折線。
使用 Consumer SDK 時，您可以控制路線折線的顯示設定或樣式
地圖上旅程路線的路線折線。SDK 會建立
歷程中每組座標的 google.maps.Polyline 物件
作用中或剩餘的路徑接著，程式庫會在
兩種情況：
- 在地圖上加入物件
- 物件使用的資料有所變更時
設定路線折線的樣式
與標記標記設定方式類似，如要設定路線折線的樣式，請使用 自訂參數。接著，請使用 方法如下：
- 最簡單的：使用
PolylineOptions套用至所有 相符的Polyline物件 - 進階：指定自訂函式。
自訂函式可讓您根據
也就是 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};