Android UI 自訂

ConsumerMapStyle 類別包含 setter 和 getter 方法,可提供標記和折線的動態自訂功能。這個類別會使用 ConsumerController.getConsumerMapStyle() 方法,以非同步方式公開。

使用者介面自訂功能會在裝置旋轉時保持有效,直到 ConsumerController 卸離為止。

自訂標記

設定標記類型及其屬性的方法為 ConsumerMapStyle.setMarkerStyleOptions()。您的自訂標記選項會覆寫 Consumer SDK 提供的預設值。如要還原預設值,請在 MarkerOptions 參數中使用空值呼叫 setMarkerStyleOptions()。使用 getMarkerStyleOptions() 擷取有效的 MarkerOptions

標記類型

以下是可供自訂的標記:

  • TRIP_PICKUP_POINT
  • TRIP_DROPOFF_POINT
  • TRIP_INTERMEDIATE_DESTINATION
  • TRIP_VEHICLE

在行程監控期間顯示 TRIP_PICKUP_POINTTRIP_DROPOFF_POINT

行程監控期間會顯示 TRIP_VEHICLE。標記圖示不會根據行程的實際交通工具類型變更。Consumer SDK 會在行程監控期間更新 TRIP_VEHICLE 圖示的旋轉角度,以模擬實際車輛行經路線的行為。

標記選項

每個標記可用的自訂屬性都是 Google 地圖 MarkerOptions 提供的一組屬性。

MarkerOptions 使用其建構函式建立,並使用「Setter」樣式方法指定自訂屬性。系統會為每個屬性提供預設值,因此您只需要指定自訂值。

如要停用標記,請將 visible 設為 false。建議您提供足夠的資料,以便使用自己的 UI 元素。

範例

Java

// Initializing marker options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setMarkerStyleOptions(
              MarkerType.TRIP_VEHICLE,
              new MarkerOptions()
                  .visible(false));
        });

// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null);

Kotlin

// Initializing marker options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, MarkerOptions().visible(false))
  })

// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null)

自訂折線

您可以使用 ConsumerMapStyle.setPolylineStyleOptions 方法設定折線。設定自訂折線選項會覆寫 Consumer SDK 提供的預設值。只要呼叫 PolylineOptions 參數為空值的 setPolylineStyleOptions,即可還原預設值。您可以使用 getPolylineStyleOptions 方法擷取使用中的 PolylineOptions

折線類型

以下折線類型可供自訂:

  • ACTIVE_ROUTE
  • REMAINING_ROUTE

系統會在行程監控期間顯示 ACTIVE_ROUTEREMAINING_ROUTE,代表車輛的路線

折線屬性

每條折線可用的可自訂屬性都是由 Google 地圖 PolylineOptions 提供。 PolylineOptions 使用其建構函式建立,並使用「Setter」樣式方法指定自訂屬性。系統會為每個屬性提供預設值,因此您只需要指定自訂值。如要關閉折線,請將 visible 設為 false

範例

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)

車流量感知折線

折線的車流量圖層預設為停用。啟用時,代表非正常流量的延伸路段會繪製在 z-index PolylineOptions.getZIndex() 的路線折線上方,並根據路況條件而繪製偏移值。

路況會表示為四種速度類型之一。你可以自訂每種速度類型的顏色。

如要啟用「偵測交通資訊折線」,您必須建構 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)

調整相機鏡頭,將焦點放在某趟旅程中

Maps SDK 內建的預設「我的位置」按鈕,會將相機置於裝置位置中央。如果有進行中的「行程」和「訂單進度」工作階段,建議將相機置於畫面中央,聚焦在旅程上,而非裝置的位置。

Android 的 Consumer SDK 內建解決方案:AutoCamera

為了讓您專心處理歷程,而非裝置位置資訊,Consumer SDK 提供預設啟用的 AutoCamera 功能。相機會放大將焦點移至行程和訂單進度路線和下一個行程路線點。

自訂攝影機行為

如果您需要進一步控管相機行為,可以使用 ConsumerController.setAutoCameraEnabled() 停用或啟用 AutoCamera。

ConsumerController.getCameraUpdate() 會傳回當下建議的攝影機邊界。接著,您可以將這個 CameraUpdate 做為 GoogleMap.moveCamera()GoogleMap.animateCamera() 的引數。