自訂路線折線

選取平台： Android iOS JavaScript

您可以使用 ConsumerMapStyle.setPolylineStyleOptions 方法自訂路線折線。如果您設定自訂多邊形選項，這些選項會覆寫 Consumer SDK 提供的預設值。

如要還原預設值，請使用 null 呼叫 setPolylineStyleOptions，並將 PolylineOptions 參數設為 null。

如要擷取有效的 PolylineOptions，請使用 getPolylineStyleOptions 方法。

詳情請參閱 ConsumerMapStyle.setPolylineStyleOptions。

路線折線類型

您可以自訂下列路線多邊形類型：

  • ACTIVE_ROUTE
  • REMAINING_ROUTE

追蹤行程時會顯示 ACTIVE_ROUTE 和 REMAINING_ROUTE，代表車輛的路線。

路線折線屬性

Google 地圖會為 PolylineOptions 中的每個多邊形提供可自訂的屬性。

  • 如要建構 PolylineOptions，請使用其建構函式。

  • 如要指定自訂屬性，請使用「Setter」樣式方法。由於這個方法會為每個屬性提供預設值，因此您只需指定任何自訂值即可。

  • 如要關閉多邊形線，請將 visible 設為 false。

詳情請參閱 Android 開發人員說明文件中的 PolylineOptions。

範例

Java

// Initializing polyline style options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.ACTIVE_ROUTE,
              new PolylineOptions()
                  .visible(false));
        });

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);

Kotlin

// Initializing polyline options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    consumerMapStyle.setPolylineStyleOptions(
      PolylineType.ACTIVE_ROUTE,
      PolylineOptions().visible(false)
    )
  })

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)

有效路線和剩餘路線

啟用行程分享功能後，應用程式可以使用多邊形顯示車輛的有效路線和剩餘路線，從而為使用者提供客製化體驗。

  • 「有效路線」是指車輛在消費者的有效行程中，目前行駛至下一個路標的路線。

  • 「剩餘路線」是指車輛仍須行經的路線，如果目前路線的路線點是最後一趟行程的路線點，則表示沒有剩餘路線。

您可以自訂及控管應用程式中有效和剩餘多邊形的顯示/隱藏狀態。根據預設，有效路線會顯示，剩餘路線則不會顯示。

範例

Java

// Initializing polyline options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.ACTIVE_ROUTE,
              new PolylineOptions()
                  .color(Color.BLUE));
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.REMAINING_ROUTE,
              new PolylineOptions()
                  .color(Color.BLACK)
                  .width(5)
                  .visible(true));
        });

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);
consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null);

Kotlin

// Initializing polyline options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    {
      consumerMapStyle.setPolylineStyleOptions(
        PolylineType.ACTIVE_ROUTE,
        PolylineOptions().color(Color.BLUE)
      )

      consumerMapStyle.setPolylineStyleOptions(
        PolylineType.REMAINING_ROUTE,
        PolylineOptions().color(Color.BLACK).width(5).visible(true)
      )
    }
  })

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)

consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null)

交通路況感知折線

折線的交通圖層預設為停用。啟用這項功能後，轉譯器會在代表非正常交通流量的路線折線上方繪製區段。這包括根據交通狀況計算的偏移量。詳情請參閱 Android 開發人員說明文件中的「Polyline」一節。

Google 地圖會以四種速度類型之一呈現交通狀況。您可以自訂每種速度類型的顏色。

如要啟用交通感知折線，請建構 TrafficStyle 物件，然後呼叫 setPolylineTrafficStyle() 將其傳遞至 ConsumerMapStyle。

範例

Java

// TrafficStyle is part of the Consumer SDK.
TrafficStyle trafficStyle = TrafficStyle.builder()
  .setTrafficVisibility(true)
  .setTrafficColor(SpeedType.NO_DATA, Color.GREY)
  .setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
  .setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
  .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
  .build();

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle);

Kotlin

// TrafficStyle is part of the Consumer SDK.
val trafficStyle =
  TrafficStyle.builder()
    .setTrafficVisibility(true)
    .setTrafficColor(SpeedType.NO_DATA, Color.GREY)
    .setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
    .setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
    .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
    .build()

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle)