設定地圖樣式

選取平台： 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

在 ConsumerMapFragment 中使用雲端式地圖樣式設定的方式有兩種：

  • 使用 XML 的靜態方式。
  • 使用 newInstance 動態。

使用 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 動態執行

如要在 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 中追蹤行程