自訂路線折線

選取平台： Android iOS JavaScript

自訂路徑折線 (或標記) 前，請先初始化 UI 自訂選項。

初始化 UI 自訂選項

建議用來初步設定 UI 自訂選項的回呼會在 GMTCMapViewDelegate 中宣告。GMTCMapView 物件準備好算繪地圖時，就會觸發 mapViewDidInitialize 回呼。樣式協調器已初始化，但沒有任何 UI 元素。

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 提供的屬性子集。Consumer 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:) 自訂代表各速度分類的顏色。