本文件將說明如何為您使用的地圖自訂路徑折線 專為消費者和車隊業者打造的網站式歷程追蹤應用程式。
使用 Consumer SDK 時，您可以控制路線折線的顯示設定或樣式
地圖上旅程路線的路線折線。SDK 會建立
歷程中每組座標的 google.maps.Polyline 物件
作用中或剩餘的路徑接著，程式庫會在
兩種情況：
- ，才能將物件新增至地圖
- 物件使用的資料有所變更時
設定路線折線的樣式
與標記標記設定方式類似，如要設定路線折線的樣式，請使用 自訂參數。接著，請使用 方法如下：
- 最簡單的：使用
PolylineOptions套用至所有 相符的Polyline物件 - 進階：指定自訂函式。
自訂函式可讓您根據
也就是 Fleet Engine 傳送的資料這個函式可以變更
動態更新物件例如將
Polyline物件是深層的陰影，或會在車輛行駛時加粗 移動速度較慢你甚至可以從 Fleet Engine 以外的來源進行彙整 並根據該資訊設定Polyline物件樣式。
自訂參數
設定路線折線樣式時，您必須使用
FleetEngineShipmentLocationProviderOptions。這些參數
車輛行駛過程中的不同路徑狀態如下：
- 已行經的路徑：使用
takenPolylineCustomization。 - 目前移動的路徑：使用
activePolylineCustomization。 - 尚未行駛路徑：使用
remainingPolylineCustomization。
使用 PolylineOptions
以下範例說明如何設定 Polyline 物件的樣式
使用 PolylineOptions。請按照此模式自訂
使用前述任一折線自訂設定的任何 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.taskTrackingInfo.remainingDrivingDistanceMeters;
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: ShipmentPolylineCustomizationFunctionParams) => {
const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
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};