設定地圖樣式

選取平台： Android iOS JavaScript

本指南將說明如何自訂 在你追蹤行程時顯示 Android 應用程式。可以自訂 以下列方式顯示地圖：

使用雲端式地圖樣式設定來設定地圖樣式

使用雲端式地圖自訂地圖元件的外觀與風格 樣式。如要在 Google Cloud 控制台中建立及編輯地圖樣式， 您完全不需要修改程式碼。 若需更多資訊，請參閲 雲端式地圖樣式設定。

兩者 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：

  • 使用 XML 靜態。
  • 使用 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
  }
}

調整相機縮放功能，將焦點移至行程上

在有效分享旅程期間，您可以處理相機縮放和 以下列兩種方式之一專注於：

  • AutoCamera：如要使用 AutoCamera，您無需 可執行任何操作相機會跟著行程。詳情請參閱 AutoCamera。

  • 自訂相機行為：如要自訂相機行為， 必須停用 AutoCamera，然後進行自訂。詳情 請參閱「自訂相機行為」。

AutoCamera將攝影機置中

Consumer SDK 提供的 AutoCamera 功能預設為啟用 Maps SDK 內建的「我的位置」按鈕上。相機縮放成 關注旅程共用路線以及下一個行程路線點。

如要使用「AutoCamera」，請務必啟用。詳情請參閱 isAutoCameraEnabled。

「AutoCamera」

如要進一步瞭解我的位置按鈕，請參閱 我的位置按鈕 Maps JavaScript API 說明文件。

自訂相機行為

如要進一步控管相機行為，請按照下列步驟停用相關設定 AutoCamera，並手動自訂相機行為。

  1. 使用 ConsumerController.setAutoCameraEnabled() 停用 AutoCamera。

  2. 使用 ConsumerController.getCameraUpdate() 取得建議的相機邊界。

  3. 請將 CameraUpdate 做為其中一個 Android 函式的引數：

後續步驟

透過 Android 裝置追蹤行程