Android 界面自定义

ConsumerMapStyle 类具有 setter 和 getter 方法，可为您提供动态自定义 用于标记和多段线该类使用 ConsumerController.getConsumerMapStyle() 方法。

界面自定义会在设备旋转后持续有效，直到 ConsumerController 处于分离状态

自定义标记

用于设置标记类型及其属性的方法为 ConsumerMapStyle.setMarkerStyleOptions()。您的自定义 标记选项会替换使用方 SDK 提供的默认值。 如需恢复默认值，请使用 null 调用 setMarkerStyleOptions() 为 MarkerOptions 参数指定样式。检索活跃 MarkerOptions 使用 getMarkerStyleOptions()。

标记类型

您可以自定义以下标记：

  • TRIP_PICKUP_POINT
  • TRIP_DROPOFF_POINT
  • TRIP_INTERMEDIATE_DESTINATION
  • TRIP_VEHICLE

在行程监控期间会显示 TRIP_PICKUP_POINT 和 TRIP_DROPOFF_POINT。

行程监控期间会显示TRIP_VEHICLE。标记图标没有变化 。消费者 SDK 更新 在行程监控期间旋转 TRIP_VEHICLE 图标，以模拟 实际车辆在行驶过程中的行为。

标记选项

每个标记的可自定义属性包括 Google 地图提供的房源 MarkerOptions。

MarkerOptions 使用其构造函数进行构建，而自定义属性则使用“Setter”指定style 方法。 系统会为每个属性提供默认值，因此您只需指定自定义值。

您可以通过将 visible 设置为 false 来关闭标记。 您应提供足够的数据，以便您使用自己的界面元素来代替。

示例

Java

// Initializing marker options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setMarkerStyleOptions(
              MarkerType.TRIP_VEHICLE,
              new MarkerOptions()
                  .visible(false));
        });

// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null);

Kotlin

// Initializing marker options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, MarkerOptions().visible(false))
  })

// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null)

自定义多段线

多段线自定义是使用 ConsumerMapStyle.setPolylineStyleOptions 方法设置的。设置自定义多段线选项 替换使用方 SDK 提供的默认值。默认值 可通过调用 setPolylineStyleOptions 来恢复 PolylineOptions 参数为 null。活跃的 PolylineOptions 可以使用 getPolylineStyleOptions 方法。

多段线类型

以下多段线类型可用于自定义：

  • ACTIVE_ROUTE
  • REMAINING_ROUTE

在行程监控期间会显示ACTIVE_ROUTE和REMAINING_ROUTE 表示车辆的路线。

多段线属性

每条多段线的可用自定义属性由 Google 地图 PolylineOptions 提供。 PolylineOptions 使用其构造函数进行构建，而自定义属性则使用“Setter”指定style 方法。默认值 因此您只需指定自定义值即可。 您可以通过将 visible 设置为 false 来关闭多段线。

示例

Java

// Initializing polyline style options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.ACTIVE_ROUTE,
              new PolylineOptions()
                  .visible(false));
        });

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);

Kotlin

// Initializing polyline options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    consumerMapStyle.setPolylineStyleOptions(
      PolylineType.ACTIVE_ROUTE,
      PolylineOptions().visible(false)
    )
  })

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)

有效路由和剩余路由

启用“行程和订单进度”后，您的应用可以自定义 多段线显示您的有效车辆和剩余车辆的用户体验 。

有效路线是指车辆当前要到达的路径 消费者当前行程中的下一个航点。剩余路由是 车辆经过当前路线的行驶路径。当有效路由处于 路径点为最后一个行程航点，则剩余路线不存在。

可自定义有效和剩余的多段线，并可控制可见性 。默认情况下，您可以看到有效路由，剩余路由 不可见。

示例

Java

// Initializing polyline options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.ACTIVE_ROUTE,
              new PolylineOptions()
                  .color(Color.BLUE));
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.REMAINING_ROUTE,
              new PolylineOptions()
                  .color(Color.BLACK)
                  .width(5)
                  .visible(true));
        });

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);
consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null);

Kotlin

// Initializing polyline options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    {
      consumerMapStyle.setPolylineStyleOptions(
        PolylineType.ACTIVE_ROUTE,
        PolylineOptions().color(Color.BLUE)
      )

      consumerMapStyle.setPolylineStyleOptions(
        PolylineType.REMAINING_ROUTE,
        PolylineOptions().color(Color.BLACK).width(5).visible(true)
      )
    }
  })

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)

consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null)

路况感知多段线

默认情况下，多段线的路况图层处于停用状态。启用这项功能后 表示非正常路况的路段在路线多段线上方绘制 z-index PolylineOptions.getZIndex() + 偏移（具体取决于路况）。

路况会以下列其中一种方式表示 四种速度类型。 您可以为每种速度类型自定义颜色。

要启用“路况感知多段线”，您必须构建一个 TrafficStyle 对象，然后通过调用 setPolylineTrafficStyle() 将其传递给 ConsumerMapStyle。

示例

Java

// TrafficStyle is part of the Consumer SDK.
TrafficStyle trafficStyle = TrafficStyle.builder()
  .setTrafficVisibility(true)
  .setTrafficColor(SpeedType.NO_DATA, Color.GREY)
  .setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
  .setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
  .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
  .build();

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle);

Kotlin

// TrafficStyle is part of the Consumer SDK.
val trafficStyle =
  TrafficStyle.builder()
    .setTrafficVisibility(true)
    .setTrafficColor(SpeedType.NO_DATA, Color.GREY)
    .setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
    .setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
    .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
    .build()

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle)

调整相机缩放比例以聚焦于旅程

默认的“我的位置”按钮 内置于设备位置的相机中心。如果有 行程和订单进度会话期间，您可能希望将 让相机聚焦于行程，而不是设备位置。

Android 版消费者 SDK 内置解决方案：AutoCamera

为了让您专注于体验历程而不是设备位置，消费者 SDK 提供了默认情况下启用的 AutoCamera 功能。相机会变焦 以聚焦于“行程”和“订单进度”路线以及下一个行程航点。

自定义相机行为

如果您需要进一步控制相机行为，可以停用或启用 使用 ConsumerController.setAutoCameraEnabled() 的 AutoCamera。

此时，ConsumerController.getCameraUpdate() 会返回建议的镜头边界。您可以 然后将此 CameraUpdate 作为参数提供给 GoogleMap.moveCamera() 或 GoogleMap.animateCamera()。

云端地图样式设置

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:

  1. 使用 XML 进行静态。
  2. 与 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
  }
}