本指南將說明如何設定地圖樣式 顯示在 iOS 應用程式中。
事前準備
您需要擁有消費者應用程式 以便完成下列操作
您也必須設定 Consumer SDK 所需的後端服務 並設定 Consumer SDK詳情請參閱「設定 Consumer SDK」一文 什麼是 Fleet Engine?。
地圖自訂功能
您可以使用的自訂功能如下:
設定地圖樣式:您可以使用雲端式地圖樣式設定地圖顏色、多邊形線和其他地圖項目的樣式。請參閱「設定地圖樣式」一文。
調整相機縮放功能:你可以使用內建功能或自行設定相機鏡頭 善用相機選項,可以專注在旅途中。詳情請見 調整相機縮放功能,將焦點放在行程上。
自訂標記和折線:您可以新增自訂標記和路線 在設計應用程式中加入折線這些設計元素可幫助消費者 應用程式,以顯示車輛路線的動態預覽。詳情請見 自訂標記和 自訂折線。
SDK 會透過
consumerMapStyleCoordinator
屬性提供這些選項。您可以透過GMTCMapView
類別使用這個屬性。
使用雲端式地圖樣式設定來設定地圖樣式
使用雲端式地圖自訂地圖元件的外觀與風格 樣式。如要在 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 靜態
如要在 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
」動態
如要在以下位置使用雲端式地圖樣式設定: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
,請務必啟用。詳情請參閱 allowCameraAutoUpdate
。
如要進一步瞭解 Maps SDK 的「我的位置」按鈕,請參閱 我的位置按鈕 。
自訂攝影機行為
如要進一步控管相機行為,可以停用 AutoCamera
和
自訂相機行為。
使用以下應用程式停用或啟用 AutoCamera
:
AllowCameraAutoUpdate
資源。
如需更多相機自訂功能,請參閱 移動相機 。