設定地圖樣式

選取平台： Android iOS JavaScript

本指南說明如何自訂 Android 應用程式中顯示的追蹤行程地圖。您可以透過下列方式自訂地圖的外觀和風格：

使用雲端式地圖樣式設定功能設定地圖樣式

使用雲端式地圖樣式設定，自訂地圖元件的外觀和風格。您可以在 Google Cloud 控制台，為使用 Google 地圖的任何應用程式建立及編輯地圖樣式，無須更改程式碼。如要瞭解詳情，請在「雲端式地圖樣式設定」頁面選取您的平台。

ConsumerMapView 和 ConsumerMapFragment 類別都支援雲端式地圖樣式設定。如要使用雲端式地圖樣式設定，請確認選取的地圖轉譯器為 LATEST。以下各節將舉例說明如何在專案中使用雲端式地圖樣式設定。

ConsumerMapView

如要在 ConsumerMapView 中使用雲端式地圖樣式設定，請在 GoogleMapOptions 上設定 mapId 欄位，並將 GoogleMapOptions 傳遞至 getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) 或 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 靜態設定

如要在 ConsumerMapFragment 中搭配使用雲端式地圖樣式設定和 XML，請新增 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 動態調整

如要在 ConsumerMapFragment 中搭配使用雲端式地圖樣式設定和 newInstance，請在 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 裝置上追蹤行程