自定义路线多段线

请选择平台: Android iOS JavaScript

在自定义路线多段线(或标记)之前,您首先需要初始化界面自定义选项。

初始化界面自定义选项

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.
}

自定义多段线

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

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

多段线类型

您可以自定义以下多段线类型:

  • GMTCPolylineType.activeRoute:车辆前往乘客下一个目的地(上车点或下车点)的路线。
  • GMTCPolylineType.remainingRoute:在车辆完成 GMTCPolylineType.activeRoute 后剩余的行程部分。

这两种类型都会在一个共享历程中显示。

多段线属性

您可以为每条多段线自定义的属性是 Google 地图 PolylineOptions 上提供的属性的子集。使用方 SDK GMTCPolylineStyleOptions 属性具有以下特征:

  • 使用初始化程序构建。
  • 如果要为任何属性提供自定义值,则名称可以是不可变或不可变的。
  • 具有默认值。

您可以自定义以下属性:

  • color
  • width
  • isVisible:要停用多段线,请将 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.strokeWidth = 8.0
  mutablepolylineStyleOptions.strokeColor = .blue
  mutablepolylineStyleOptions.zIndex = 1000
  mutablepolylineStyleOptions.isGeodesic = 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.strokeWidth = 8.0;
  mutablepolylineStyleOptions.strokeColor = [UIColor blueColor];
  mutablepolylineStyleOptions.zIndex = 1000;
  mutablepolylineStyleOptions.isGeodesic = 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:) 自定义表示各个速度分类的颜色。