本指南介绍了在 iOS 应用中跟随行程时,您可以采用哪些方式来设置地图样式。
准备工作
在设置地图样式之前,您需要有一个已实现以下内容的消费者应用:
您还需要设置 Consumer SDK 所需的后端服务,并设置 Consumer SDK。如需了解详情,请参阅设置 Consumer SDK 和 什么是 Fleet Engine?。
地图自定义
可用的自定义设置如下:
设置地图样式:您可以使用云端地图样式设置来设置地图颜色、多段线和其他地图元素的样式。请参阅设置地图样式。
调整相机缩放比例:您可以使用内置功能或设置自己的相机选项,以便专注于旅程。请参阅调整相机缩放倍数以聚焦于行程。
自定义标记和多段线:您可以向应用设计添加自定义标记和路线多段线。借助这些设计元素,您的消费者应用可以显示车辆路线的动态预览。请参阅自定义标记和自定义折线。
SDK 通过
consumerMapStyleCoordinator属性提供这些选项。此属性可通过GMTCMapView类获取。
使用云端地图样式设置来设置地图样式
使用云端地图样式设置自定义地图组件的外观和风格。您可以在 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 中使用 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,请确保已启用该功能。如需了解详情,请参阅 allowCameraAutoUpdate。

如需详细了解 Maps SDK 的我的位置按钮,请参阅 Maps SDK for iOS 文档中的“我的位置”按钮。
自定义摄像头行为
如需更好地控制摄像头行为,您可以停用 AutoCamera 并自定义摄像头行为。
使用 AllowCameraAutoUpdate 属性停用或启用 AutoCamera。
如需了解更多相机自定义设置,请参阅 Maps SDK for iOS 文档中的移动相机。