自訂路線折線

選取平台: Android iOS JavaScript

您可以使用 ConsumerMapStyle.setPolylineStyleOptions 方法自訂路線折線。如果您設定自訂折線選項,系統會覆寫 Consumer SDK 提供的預設值。

如要還原預設值,請使用 PolylineOptions 參數的 null 呼叫 setPolylineStyleOptions

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

詳情請參閱 ConsumerMapStyle.setPolylineStyleOptions

路線折線類型

您可以自訂下列路線折線類型:

  • ACTIVE_ROUTE
  • REMAINING_ROUTE

在追蹤行程時,系統會顯示 ACTIVE_ROUTEREMAINING_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.
int orange = Color.rgb(255, 165, 0);
TrafficStyle trafficStyle = TrafficStyle.builder()
  .setTrafficVisibility(true)
  .setTrafficColor(SpeedType.NO_DATA, Color.GREY)
  .setTrafficColor(SpeedType.NORMAL, Color.BLUE)
  .setTrafficColor(SpeedType.SLOW, orange)
  .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
  .build();

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle);

Kotlin

// TrafficStyle is part of the Consumer SDK.
val orange = Color.rgb(255, 165, 0)
val trafficStyle =
  TrafficStyle.builder()
    .setTrafficVisibility(true)
    .setTrafficColor(SpeedType.NO_DATA, Color.GRAY)
    .setTrafficColor(SpeedType.NORMAL, Color.BLUE)
    .setTrafficColor(SpeedType.SLOW, orange)
    .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
    .build()

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle)