Android UI 自訂

ConsumerMapStyle 類別具有 setter 和 getter 方法，可提供動態自訂功能 標記和折線。此類別是使用 以非同步方式公開 ConsumerController.getConsumerMapStyle() 方法。

UI 自訂項目在裝置旋轉時仍會保持有效，直到 ConsumerController 就會從容器中卸離

自訂標記

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

標記類型

您可以運用下列標記自訂標記：

  • TRIP_PICKUP_POINT
  • TRIP_DROPOFF_POINT
  • TRIP_INTERMEDIATE_DESTINATION
  • TRIP_VEHICLE

行程監控期間，螢幕會顯示TRIP_PICKUP_POINT和 TRIP_DROPOFF_POINT。

行程監控期間，TRIP_VEHICLE 會顯示。標記圖示不會改變 根據行程的實際交通工具類型而定。Consumer SDK 更新 在監控行程期間，TRIP_VEHICLE 圖示的旋轉角度會模仿 實際車輛的行為。

標記選項

每個標記可用的自訂屬性均具備 「Google 地圖」提供的房源 MarkerOptions。

MarkerOptions 是使用其建構函式建構而成，而自訂屬性是以「Setter」指定style 方法。 每個屬性都會提供預設值，因此您只需要指定自訂值。

如要關閉標記，請將 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 提供的預設值。預設值 但只要呼叫 setPolylineStyleOptions 即可還原 PolylineOptions 參數的值為空值。有效 PolylineOptions可以使用 getPolylineStyleOptions 方法。

折線類型

您可以自訂下列折線類型：

  • ACTIVE_ROUTE
  • REMAINING_ROUTE

行程監控期間，ACTIVE_ROUTE和REMAINING_ROUTE顯示為 代表車輛路線。

折線屬性

每條折線的可自訂屬性都是由 Google 地圖 PolylineOptions 提供。 PolylineOptions 是使用其建構函式建構而成，而自訂屬性是以「Setter」指定style 方法。預設值 每個屬性 都提供 ，因此您只需指定自訂值。 如要關閉折線，請將 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() 以及根據路況而定的偏移值。

路況資訊包括： 4 種速度類型。 你可以自訂每種速度類型的顏色。

如要啟用「可偵測路況的折線」，您必須建構 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)

調整相機縮放功能，將焦點放在特定旅程

預設的我的位置按鈕 內建於地圖 SDK 中，可將相機置於裝置位置中心。如果有 正在進行的「行程」和「訂單進度」工作階段，建議您將 而不是拍攝裝置位置資訊。

Android 專用的 Consumer SDK for Android 內建解決方案：AutoCamera

使用 Consumer SDK，即可專心瀏覽歷程，而非裝置位置資訊 提供預設啟用的 AutoCamera 功能。相機縮放 ，即可瞭解行程和訂單進度路線，以及下一個行程路線。

自訂相機行為

如果您需要進一步控管攝影機行為，可以停用或啟用 使用「ConsumerController.setAutoCameraEnabled()」自動相機。

ConsumerController.getCameraUpdate() 目前會傳回建議的相機邊界。你可以 然後，將這個 CameraUpdate 做為引數提供給 GoogleMap.moveCamera() 或 GoogleMap.animateCamera()。

雲端式地圖樣式設定

兩者 ConsumerMapView 和 ConsumerMapFragment 類別支援雲端式地圖樣式設定。 如要使用雲端式地圖樣式設定，請確認所選地圖 轉譯器為 LATEST。下列範例說明如何使用 雲端式地圖樣式設定。

ConsumerMapView

如要在 ConsumerMapView 中使用雲端式地圖樣式設定，請設定 GoogleMapOptions 的 mapId 欄位，並將 GoogleMapOptions 傳遞至 getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) or getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions)

範例

Java

public class SampleAppActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ConsumerMapView mapView = findViewById(R.id.consumer_map_view);

    if (mapView != null) {
      GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
      mapView.getConsumerGoogleMapAsync(
          new ConsumerMapReadyCallback() {
            @Override
            public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
              // ...
            }
          },
          /* fragmentActivity= */ this,
          /* googleMapOptions= */ optionsWithMapId);
    }
  }
}

Kotlin

class SampleAppActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    mapView.getConsumerGoogleMapAsync(
      object : ConsumerGoogleMap.ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      },
      /* fragmentActivity= */ this,
      /* googleMapOptions= */ optionsWithMapId)
  }
}

ConsumerMapFragment

在以下項目中使用雲端式地圖樣式設定的方法有兩種： ConsumerMapFragments:

  1. 使用 XML 靜態。
  2. 使用 newInstance 動態。

使用 XML 靜態

如要搭配 XML 中的 XML 使用雲端式地圖樣式設定， ConsumerMapFragment，以指定的 map:mapId XML 屬性新增 mapId。請參閱以下範例：

<fragment
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
    android:id="@+id/consumer_map_fragment"
    map:mapId="map-id"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

使用「newInstance」動態

如要在以下位置使用雲端式地圖樣式設定：newInstance ConsumerMapFragment，在 GoogleMapOptions 上設定 mapId 欄位，並傳遞 GoogleMapOptions 至 newInstance。請參閱以下範例：

Java

public class SampleFragmentJ extends Fragment {

  @Override
  public View onCreateView(
      @NonNull LayoutInflater inflater,
      @Nullable ViewGroup container,
      @Nullable Bundle savedInstanceState) {

    final View view = inflater.inflate(R.layout.consumer_map_fragment, container, false);

    GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
    ConsumerMapFragment consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId);

    getParentFragmentManager()
        .beginTransaction()
        .add(R.id.consumer_map_fragment, consumerMapFragment)
        .commit();

    consumerMapFragment.getConsumerGoogleMapAsync(
        new ConsumerMapReadyCallback() {
          @Override
          public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
            // ...
          }
        });

    return view;
  }
}

Kotlin

class SampleFragment : Fragment() {
  override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?): View? {

    val view = inflater.inflate(R.layout.consumer_map_fragment, container, false)

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    val consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId)

    parentFragmentManager
      .beginTransaction()
      .add(R.id.consumer_map_fragment, consumerMapFragment)
      .commit()

    consumerMapFragment.getConsumerGoogleMapAsync(
      object : ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      })

    return view
  }
}