设置地图样式

请选择平台: Android iOS JavaScript

本指南介绍了自定义显示在 Android 应用。您可以自定义 自定义地图:

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

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

ConsumerMapViewConsumerMapFragment 类支持云端地图样式设置。 若要使用云端地图样式设置,请确保所选地图 渲染程序为 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,请务必启用它。如需了解详情,请参阅 isAutoCameraEnabled

“AutoCamera”

有关我的位置按钮的详细信息,请参阅 “我的位置”按钮

自定义相机行为

要进一步控制相机行为,请按以下步骤停用 AutoCamera,然后手动自定义相机行为。

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

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

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

后续步骤

在 Android 中跟踪行程