设置地图样式

请选择平台: Android iOS JavaScript

本指南介绍了如何设置地图样式, 会显示在您的 iOS 应用中。

准备工作

在设置地图样式之前,您需要拥有一款具有 实现了以下各项:

您还需要设置使用方 SDK 所需的后端服务, 并设置使用方 SDK。如需了解详情,请参阅设置使用方 SDK 以及什么是 Fleet Engine?

地图自定义

可用的自定义设置如下所示:

  • 设置地图样式:您可以为地图样式、多段线和其他地图项设置样式 使用云端地图样式设置。请参阅设置地图样式

  • 调整相机缩放倍数:您可以使用内置功能或设置自己的相机选项,以聚焦于行程。请参阅 调整相机缩放比例以聚焦于行程

  • 自定义标记和多段线:您可以添加自定义标记和路线 添加到应用设计中的多段线借助这些设计元素,您的消费者应用可以显示车辆路线的动态预览。请参阅自定义标记自定义多段线

    SDK 通过 consumerMapStyleCoordinator 提供这些选项 属性。此属性可通过 GMTCMapView 类获得。

使用云端地图样式设置为地图设置样式

使用云端地图自定义地图组件的外观和风格 样式。您可以在 Google Cloud 控制台上创建和修改地图样式, 而无需更改任何代码。 如需了解详情,请参阅 云端地图样式设置

ConsumerMapViewConsumerMapFragment 类支持云端地图样式设置。 如需使用云端地图样式设置,请确保所选的地图渲染程序为 LATEST。以下部分展示了如何在项目中使用基于云的 Google 地图样式的示例。

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

在 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

`AutoCamera`

如需详细了解 Maps SDK 的我的位置按钮,请参阅 “我的位置”按钮

自定义相机行为

如需进一步控制相机行为,您可以停用 AutoCamera 并 自定义相机行为。

使用AutoCamera AllowCameraAutoUpdate 属性。

如需了解更多相机自定义选项,请参阅 移动相机

后续步骤

在 iOS 中跟踪行程