按需约车和送货解决方案目前仅面向部分合作伙伴提供。

此页面由 Cloud Translation API 翻译。

iOS 界面自定义

使用 Consumer SDK，您可以在应用设计中应用自定义标记和路由多段线。借助这些设计元素，您的消费者应用能够显示车辆路线的动态预览。

本指南介绍了 SDK 在 consumerMapStyleCoordinator 属性中提供的选项。此属性通过 GMTCMapView 类提供。本指南仅涵盖界面元素，并假定您拥有可正常运行的使用方应用。如需了解如何设置 Consumer SDK 所需的后端服务，请参阅 Fleet Engine 使用入门。

初始化界面自定义选项

GMTCMapViewDelegate 中声明了用于最初设置界面自定义选项的推荐回调。当 GMTCMapView 对象准备好渲染地图时，会触发 mapViewDidInitialize 回调函数。已初始化样式协调器，但不存在任何界面元素。

Swift

/** ViewController.swift */

class ViewController: UIViewController, GMTCMapViewDelegate {

  // MARK: - GMTCMapViewDelegate

  func mapViewDidInitialize(_ mapview: GMTCMapView) {
    // Set the UI customization options here.
  }
}

Objective-C

/** ViewController.m */

@interface ViewController () <GMTCMapViewDelegate>

#pragma mark GMTCMapViewDelegate

- (void)mapViewDidInitialize:(GMTCMapView *)mapview {
  // Set the UI customization options here.
}

自定义标记

以下示例使用 GMTCMapView 自定义标记样式。如需设置标记类型及其属性，请使用 setMarkerStyleOptions(_:markerType:)。您的自定义标记选项会覆盖 Consumer SDK 提供的默认值。

Swift

/** ViewController.swift */

private func changeMarkerStyle(
  markerStyleOptions: GMTCMarkerStyleOptions?,
  markerType: GMTCCustomizableMarkerType
) {
  let styleCoordinator = mapView.consumerMapStyleCoordinator
  styleCoordinator.setMarkerStyleOptions(markerStyleOptions, markerType: markerType)
}

/** To restore the default values, call setMarkerStyleOptions(_:markerType:) using nil for the GMTCMarkerStyleOptions parameter.
Here is an example of retrieving the active GMTCMarkerStyleOptions. */

private func retrieveMarkerStyle(markerType: GMTCCustomizableMarkerType) {
  let styleCoordinator = mapView.consumerMapStyleCoordinator

  // The 'markerStyleOptions' contains the stored style options for this marker type.
  let markerStyleOptions = styleCoordinator.markerStyleOptions(for: markerType)
}

Objective-C

/** ViewController.h */

- (void)changeMarkerStyle:(nullable GMTCMarkerStyleOptions *)markerStyleOptions
               markerType:(GMTCCustomizableMarkerType)markerType {
  GMTCConsumerMapStyleCoordinator *styleCoordinator = _mapView.consumerMapStyleCoordinator;
  [styleCoordinator setMarkerStyleOptions:markerStyleOptions markerType:markerType];
}

/** To restore the default values, call setMarkerStyleOptions:markerStyleOptions:markerType: using nil for the GMTCMarkerStyleOptions parameter.
Here is an example of retrieving the active GMTCMarkerStyleOptions. */

- (void)retrieveMarkerStyle:(GMTCCustomizableMarkerType)markerType {
  GMTCConsumerMapStyleCoordinator *styleCoordinator = _mapView.consumerMapStyleCoordinator;

  // The 'markerStyleOptions' contains the stored style options for this marker type.
  GMTCMarkerStyleOptions *markerStyleOptions = [styleCoordinator markerStyleOptionsForType:markerType];
}

标记类型

以下标记可用于自定义：

GMTCCustomizableMarkerType.unknown
GMTCCustomizableMarkerType.tripPickupPoint
GMTCCustomizableMarkerType.tripDropoffPoint
GMTCCustomizableMarkerType.tripVehicle
GMTCCustomizableMarkerType.intermediateDestination

使用 GMTCCustomizableMarkerType.tripPickupPoint、GMTCCustomizableMarkerType.intermediateDestination 和 GMTCCustomizableMarkerType.tripDropoffPoint 自定义行程和订单进度期间的航点。

在“行程”和“订单进度”期间，使用 GMTCCustomizableMarkerType.tripVehicle 自定义车辆图标。标记图标不会根据行程的实际车辆类型而变化。

标记选项

每个标记可用的可自定义属性是 Google 地图 MarkerOptions 提供的属性的一部分。Consumer SDK GMTCMarkerStyleOptions 使用初始化程序进行构建，且在构建后不可变。由于每个属性都有默认值，因此只需指定自定义值即可。

以下属性可进行自定义：

groundAnchor
isVisible
iconView
icon
zIndex
isFlat

将 isVisible 设置为 false 相当于“关闭”标记。您应提供足够的数据，以便您使用自己的界面元素来代替它。

示例

Swift

/** MapViewController.swift */

private func updateMarkerUIOptions() {
  // Get the GMTCConsumerMapStyleCoordinator
  let consumerMapStyleCoordinator = mapView.consumerMapStyleCoordinator

  // The marker type that you would like to set custom UI options for.
  let customizableMarkerType = GMTCCustomizableMarkerType.tripVehicle

  // Initializing marker options.
  let markerStyleOptions = GMTCMutableMarkerStyleOptions()
  markerStyleOptions.groundAnchor = kGMSMarkerDefaultGroundAnchor
  markerStyleOptions.icon = icon
  markerStyleOptions.zIndex = 100
  markerStyleOptions.isFlat = false
  markerStyleOptions.isVisible = true

  consumerMapStyleCoordinator.setMarkerStyleOptions(markerStyleOptions, markerType: customizableMarkerType)

  // Reset marker options to default values.
  consumerMapStyleCoordinator.setMarkerStyleOptions(nil, markerType: customizableMarkerType)
}

Objective-C

/** MapViewController.m */

- (void)updateMarkerUIOptions {
  // Get the GMTCConsumerMapStyleCoordinator
  GMTCConsumerMapStyleCoordinator *consumerMapStyleCoordinator = [_mapView consumerMapStyleCoordinator];

  // The marker type that you would like to set custom UI options for.
  GMTCCustomizableMarkerType customizableMarkerType = GMTCCustomizableMarkerTypeTripVehicle;

  // Initializing marker options.
  GMTCMutableMarkerStyleOptions *markerStyleOptions =
      [[GMTCMutableMarkerStyleOptions alloc] init];
  markerStyleOptions.groundAnchor = kGMSMarkerDefaultGroundAnchor;
  markerStyleOptions.icon = icon;
  markerStyleOptions.zIndex = 100;
  markerStyleOptions.isFlat = NO;
  markerStyleOptions.isVisible = YES;

  [consumerMapStyleCoordinator setMarkerStyleOptions:markerStyleOptions markerType:customizableMarkerType];

  // Reset marker options to default values.
  [consumerMapStyleCoordinator setMarkerStyleOptions:nil markerType:customizableMarkerType];
}

针对上车点标记的动态预计到达时间更新

如需创建定期动态显示更新的预计到达时间的上车点标记，请更新 GMTCCustomizableMarkerType.tripPickupPoint 的标记样式选项。

示例

Swift

/** MapViewController.swift */

/// Updates the ETA every minute by creating a Timer that repeats every minute.
private func schedulePickupMarkerStyleUpdates() {
  Timer.scheduledTimer(
    timeInterval: 60.0,  // Update marker ETA every minute.
    target: self,
    selector: #selector(updatePickupMarkerETA),
    userInfo: nil,
    repeats: true)
}

/// Updates the marker options for GMTCCustomizableMarkerType.tripPickupPoint for the current time.
@objc private func updatePickupMarkerETA() {
  let consumerMapStyleCoordinator = mapView.consumerMapStyleCoordinator
  let previousOptions = consumerMapStyleCoordinator.markerStyleOptions(for: .tripPickupPoint)

  // Get updated ETA icon.
  let updatedETAIcon = pickupIconForCurrentTime()

  let markerStyleOptions = GMTCMutableMarkerStyleOptions()
  markerStyleOptions.groundAnchor = kGMSMarkerDefaultGroundAnchor
  markerStyleOptions.icon = updatedETAIcon
  markerStyleOptions.zIndex = 100
  markerStyleOptions.isFlat = false
  markerStyleOptions.isVisible = true

  consumerMapStyleCoordinator.setMarkerStyleOptions(markerStyleOptions, markerType: .tripPickupPoint)
}

Objective-C

/** MapViewController.m */

/** Updates the ETA every minute by creating an NSTimer that repeats every minute. */
- (void)schedulePickupMarkerStyleUpdates {
  [NSTimer scheduledTimerWithTimeInterval:60.0 // Update marker ETA every minute.
                                   target:self
                                 selector:@selector(updatePickupMarkerETA)
                                 userInfo:nil
                                  repeats:YES];
}

/** Updates the marker options for GMTCCustomizableMarkerTypeTripPickupPoint for the current time. */
- (void)updatePickupMarkerETA {
  GMTCConsumerMapStyleCoordinator *consumerMapStyleCoordinator = [_mapView consumerMapStyleCoordinator];
  GMTCMarkerStyleOptions *previousOptions = [consumerMapStyleCoordinator markerStyleOptionsForType:GMTCCustomizableMarkerTypeTripPickupPoint];

  // Get updated ETA icon.
  UIImage *updatedETAIcon = [self pickupIconForCurrentTime];

  GMTCMutableMarkerStyleOptions *markerStyleOptions =
                               [[GMTCMutableMarkerStyleOptions alloc] init];
  markerStyleOptions.groundAnchor = kGMSMarkerDefaultGroundAnchor;
  markerStyleOptions.icon = updatedETAIcon;
  markerStyleOptions.zIndex = 100;
  markerStyleOptions.isFlat = NO;
  markerStyleOptions.isVisible = YES;

  [consumerMapStyleCoordinator setMarkerStyleOptions:markerStyleOptions markerType:GMTCCustomizableMarkerTypeTripPickupPoint];
}

自定义多段线

多段线自定义是使用 GMTCConsumerMapStyleCoordinator#setPolylineStyleOptions(_:polylineType:) 设置的。

以下示例展示了如何设置多段线样式选项：

Swift

/** ViewController.swift */

private func changePolylineStyleOptions(
  polylineStyleOptions: GMTCPolylineStyleOptions?,
  polylineType: GMTCPolylineType
) {
  let styleCoordinator = mapView.consumerMapStyleCoordinator
  styleCoordinator.setPolylineStyleOptions(polylineStyleOptions, polylineType: polylineType)
}

/* Setting custom polyline options will override the default values provided by the Consumer SDK.
The default values can be restored by calling setPolylineStyleOptions(_:polylineType:) with nil for the GMTCPolylineStyleOptions.
The active GMTCPolylineStyleOptions can be retrieved via */

private func retrievePolylineStyleOptions(for polylineType: GMTCPolylineType) {
  let styleCoordinator = mapView.consumerMapStyleCoordinator

  // The 'polylineStyleOptions' contains the stored style options for this polyline type.
  let polylineStyleOptions = styleCoordinator.polylineStyleOptions(for: polylineType)
}

Objective-C

/** ViewController.h */

- (void)changePolylineStyleOptions:(nullable GMTCPolylineStyleOptions *)polylineStyleOptions
                      polylineType:(GMTCPolylineType)polylineType {
  GMTCConsumerMapStyleCoordinator *styleCoordinator = _mapView.consumerMapStyleCoordinator;
  [styleCoordinator setPolylineStyleOptions:polylineStyleOptions polylineType:polylineType];
}

/* Setting custom polyline options will override the default values provided by the Consumer SDK.
The default values can be restored by calling setPolylineStyleOptions:polylineType: with nil for the GMTCPolylineStyleOptions.
The active GMTCPolylineStyleOptions can be retrieved via */

- (void)retrievePolylineStyleOptionsForType:(GMTCPolylineType)polylineType {
  GMTCConsumerMapStyleCoordinator *styleCoordinator = _mapView.consumerMapStyleCoordinator;

  // The 'polylineStyleOptions' contains the stored style options for this polyline type.
  GMTCPolylineStyleOptions *polylineStyleOptions = [styleCoordinator polylineStyleOptionsForType:polylineType];
}

多段线类型

以下多段线类型可进行自定义：

GMTCPolylineType.activeRoute
GMTCPolylineType.remainingRoute

GMTCPolylineType.activeRoute 和 GMTCPolylineType.remainingRoute 在整个行程和订单进度中显示。GMTCPolylineType.activeRoute 是车辆前往乘客下个地点的路线，无论是上车点还是下车点。GMTCPolylineType.remainingRoute 是车辆完成 GMTCPolylineType.activeRoute 后留下的行程片段。

多段线属性

适用于每条多段线的可自定义属性是 Google 地图 PolylineOptions 上提供的属性的一部分。消费者 SDK 的 GMTCPolylineStyleOptions 是使用初始化程序构建的。如果您希望为任何属性提供自定义值，这些值可能不可变或可变。系统为每个属性提供了默认值。

以下属性可进行自定义：

color
width
isVisible
isTrafficEnabled

将 isVisible 设置为 false 相当于停用多段线。默认情况下，isTrafficEnabled 设为 false。

示例

Swift

/** MapViewController.swift */

private func updatePolylineUIOptions() {
  // Get the GMTCConsumerMapStyleCoordinator
  let consumerMapStyleCoordinator = mapView.consumerMapStyleCoordinator

  // The polyline type that you would like to set custom UI options for.
  let customizablePolylineType = GMTCPolylineType.activeRoute

  // Initializing polyline options with default values (immutable version).
  let polylineStyleOptions = GMTCPolylineStyleOptions()
  consumerMapStyleCoordinator.setPolylineStyleOptions(
    polylineStyleOptions, polylineType: customizablePolylineType)

  // Initializing polyline options with custom values (mutable version).
  let mutablePolylineStyleOptions = GMTCMutablePolylineStyleOptions()
  mutablePolylineStyleOptions.isVisible = true
  mutablePolylineStyleOptions.isTrafficEnabled = true
  mutablePolylineStyleOptions.setTrafficColorFor(.slow, color: .yellow)
  mutablePolylineStyleOptions.setTrafficColorFor(.trafficJam, color: .purple)
  consumerMapStyleCoordinator.setPolylineStyleOptions(
    mutablePolylineStyleOptions, polylineType: customizablePolylineType)

  // Reset polyline options to default values.
  consumerMapStyleCoordinator.setPolylineStyleOptions(
    nil, polylineType: customizablePolylineType)
}

Objective-C

/** MapViewController.m */

- (void)updatePolylineUIOptions {
  // Get the GMTCConsumerMapStyleCoordinator
  GMTCConsumerMapStyleCoordinator *consumerMapStyleCoordinator = [_mapView consumerMapStyleCoordinator];

  // The polyline type that you would like to set custom UI options for.
  GMTCPolylineType customizablePolylineType = GMTCPolylineTypeActiveRoute;

  // Initializing polyline options with default values (immutable version).
  GMTCPolylineStyleOptions *polylineStyleOptions = [[GMTCPolylineStyleOptions alloc] init];
  [consumerMapStyleCoordinator setPolylineStyleOptions:polylineStyleOptions
                                          polylineType:customizablePolylineType];

  // Initializing polyline options with custom values (mutable version).
  GMTCMutablePolylineStyleOptions *mutablePolylineStyleOptions = [[GMTCMutablePolylineStyleOptions alloc] init];
  mutablePolylineStyleOptions.isVisible = YES;
  mutablePolylineStyleOptions.isTrafficEnabled = YES;
  [mutablePolylineStyleOptions setTrafficColorForSpeed:GMTSSpeedTypeSlow color:[UIColor yellowColor]];
  [mutablePolylineStyleOptions setTrafficColorForSpeed:GMTSSpeedTypeTrafficJam color:[UIColor purpleColor]];
  [consumerMapStyleCoordinator setPolylineStyleOptions:mutablePolylineStyleOptions
                                          polylineType:customizablePolylineType];

  // Reset polyline options to default values.
  [consumerMapStyleCoordinator setPolylineStyleOptions:nil
                                          polylineType:customizablePolylineType];
}

路况感知多段线

默认情况下，多段线的路况图层处于停用状态。通过 polylineStyleOptions.isTrafficEnabled = true 启用该选项后，系统会将表示非正常流量延伸段的路段绘制为路线。

路况信息以如下四种速度之一表示：GMTSSpeedType.noData、GMTSSpeedType.normal、GMTSSpeedType.slow 和 GMTSSpeedType.trafficJam。您可以使用 setTrafficColorFor(_:color:) 自定义表示上述各个速度分类的颜色。