本指南介绍了如何设置地图样式, 会显示在您的 iOS 应用中。
准备工作
在设置地图样式之前,您需要拥有一款具有 实现了以下各项:
您还需要设置使用方 SDK 所需的后端服务, 并设置使用方 SDK。如需了解详情,请参阅设置使用方 SDK 以及什么是 Fleet Engine?。
地图自定义
可用的自定义设置如下所示:
设置地图样式:您可以为地图样式、多段线和其他地图项设置样式 使用云端地图样式设置。请参阅设置地图样式。
调整相机缩放:您可以使用内置功能或自行设置 相机选项,让您专注于旅程。请参阅 调整相机缩放比例以聚焦于行程。
自定义标记和多段线:您可以添加自定义标记和路线 添加到应用设计中的多段线这些设计元素可让您的 Consumer 应用,以显示车辆的路线的动态预览。请参阅 自定义标记和 自定义多段线。
SDK 通过
consumerMapStyleCoordinator
提供这些选项 属性。此属性可通过GMTCMapView
类获得。
使用云端地图样式设置设置地图样式
使用云端地图自定义地图组件的外观和风格 样式。您可以在 Google Cloud 控制台上创建和修改地图样式, 而无需更改任何代码。 如需了解详情,请参阅 云端地图样式设置。
ConsumerMapView
和
ConsumerMapFragment
类支持云端地图样式设置。
若要使用云端地图样式设置,请确保所选地图
渲染程序为 LATEST
。以下部分举例说明了如何使用
云端地图样式设置。
ConsumerMapView
如需在 ConsumerMapView
中使用云端地图样式设置,请将
mapId
字段,并将 GoogleMapOptions
传递给GoogleMapOptions
getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment,
GoogleMapOptions)
or 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
在 Google Maps Engine 中,您可以通过两种方式使用云端地图样式设置 ConsumerMapFragments:
- 使用 XML 进行静态。
- 与
newInstance
动态关联。
使用 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
动态
若要将云端地图样式设置与 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
会将摄像头居中放置
使用方 SDK 提供默认启用的 AutoCamera
功能
(针对 Maps SDK 内置的我的位置按钮)。相机将缩放至
侧重于行程分享路线和下一个行程航点。
如果您要使用 AutoCamera
,请确保已启用它。有关详情,请参阅
allowCameraAutoUpdate
。
如需详细了解 Maps SDK 的我的位置按钮,请参阅 “我的位置”按钮 。
自定义相机行为
如需进一步控制相机行为,您可以停用 AutoCamera
并
自定义相机行为。
使用AutoCamera
AllowCameraAutoUpdate
属性。
如需了解更多相机自定义选项,请参阅 移动相机 。