自訂路線折線

本文件將說明如何為您使用的地圖自訂路徑折線 專為消費者和車隊業者打造的網站式歷程追蹤應用程式。

使用 Consumer SDK 時,您可以控制路線折線的顯示設定或樣式 地圖上旅程路線的路線折線。SDK 會建立 歷程中每組座標的 google.maps.Polyline 物件 作用中或剩餘的路徑接著,程式庫會在 兩種情況:

  • ,才能將物件新增至地圖
  • 物件使用的資料有所變更時

設定路線折線的樣式

與標記標記設定方式類似,如要設定路線折線的樣式,請使用 自訂參數。接著,請使用 方法如下:

  • 最簡單的:使用 PolylineOptions 套用至所有 相符的 Polyline 物件
  • 進階:指定自訂函式。 自訂函式可讓您根據 也就是 Fleet Engine 傳送的資料這個函式可以變更 動態更新物件例如將 Polyline 物件是深層的陰影,或會在車輛行駛時加粗 移動速度較慢你甚至可以從 Fleet Engine 以外的來源進行彙整 並根據該資訊設定 Polyline 物件樣式。

自訂參數

設定路線折線樣式時,您必須使用 FleetEngineShipmentLocationProviderOptions。這些參數 車輛行駛過程中的不同路徑狀態如下:

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