自訂路線折線

本文說明如何在網頁式歷程追蹤應用程式中,針對消費者使用者和車隊操作人員,自訂地圖的路徑折線。

使用 Consumer SDK,您可以控制路線折線的顯示設定,或為地圖上路線的路線折線設定樣式。SDK 會為歷程中有效或其餘路徑中的每組座標建立 google.maps.Polyline 物件。程式庫會在兩種情況下套用這些自訂項目:

  • 在地圖上加入物件
  • 物件使用的資料有所變更時

設定路線折線的樣式

與標記樣式的設定方式類似,您可以使用自訂參數設定路線折線的樣式。接著,您可以使用下列任一方法設定樣式:

  • 簡單:在建立或更新時,使用 PolylineOptions 套用至所有相符的 Polyline 物件。
  • 進階:指定自訂函式。自訂化函式可根據 Fleet Engine 傳送的資料,為物件設定個別樣式。此函式可以根據旅程目前的狀態變更每個物件的樣式。舉例來說,將 Polyline 物件上色更深,或在車輛移動速度較慢時加粗。您甚至可以彙整來自 Fleet Engine 以外來源的資料,並根據該資訊為 Polyline 物件設定樣式。

自訂參數

設定路線折線樣式時,您會使用 FleetEngineShipmentLocationProviderOptions 中提供的參數。這些參數可提供車輛行程中的不同路徑狀態,如下所示:

使用 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.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};