设置地图样式

请选择平台： Android iOS JavaScript

本指南介绍了一些方法，可用于自定义行程期间显示在 Android 应用中显示的地图。您可以通过以下方式自定义地图的外观和风格：

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

使用云端地图样式设置自定义地图组件的外观和风格。您可以在 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 与云端地图样式搭配使用，请添加包含指定 mapId 的 map:mapId XML 属性。请参阅以下示例：

<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将摄像头置于中央

消费者 SDK 提供了 AutoCamera 功能，默认情况下，Maps SDK 的内置我的位置按钮会启用该功能。相机会缩放以聚焦于行程路线和下一个行程航点。

如果您想使用 AutoCamera，请务必启用它。如需了解详情，请参阅 isAutoCameraEnabled。

“AutoCamera”

如需详细了解我的位置按钮，请参阅 Maps JavaScript API 文档中的“我的位置”按钮。

自定义相机行为

如需更好地控制摄像头行为，请按照以下步骤停用 AutoCamera 并手动自定义摄像头行为。

  1. 使用 ConsumerController.setAutoCameraEnabled() 停用 AutoCamera。

  2. 使用 ConsumerController.getCameraUpdate() 获取建议的相机边界。

  3. 将 CameraUpdate 作为参数提供给以下某个 Android 函数：

后续步骤

在 Android 设备上跟踪行程