自訂路線折線

本文說明如何為網路式行程追蹤應用程式 (供消費者使用者和車隊營運人員使用) 中的地圖自訂路線折線。

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