本指南將說明如何自訂 在你追蹤行程時顯示 Android 應用程式。可以自訂 以下列方式顯示地圖:
使用雲端式地圖樣式設定來設定地圖樣式
使用雲端式地圖自訂地圖元件的外觀與風格 樣式。如要在 Google Cloud 控制台中建立及編輯地圖樣式, 您完全不需要修改程式碼。 若需更多資訊,請參閲 雲端式地圖樣式設定。
兩者
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 的靜態
如要搭配 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
」動態
如要在 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
。
如要進一步瞭解「我的位置」按鈕,請參閱 Maps JavaScript API 說明文件中的「我的位置按鈕」。
自訂相機行為
如要進一步控管相機行為,請按照下列步驟停用相關設定
AutoCamera
,並手動自訂相機行為。
使用 ConsumerController.setAutoCameraEnabled() 停用
AutoCamera
。使用 ConsumerController.getCameraUpdate() 取得建議的相機邊界。
請將
CameraUpdate
做為其中一個 Android 函式的引數: