ルートのポリラインをカスタマイズする

プラットフォームを選択: 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 を使用して有効にすると、通常のトラフィック以外の区間を表すセグメントがルートとして描画されます。

交通状況は、次の 4 つの速度のいずれかで表されます。

  • GMTSSpeedType.noData
  • GMTSSpeedType.normal
  • GMTSSpeedType.slow
  • GMTSSpeedType.trafficJam

setTrafficColorFor(_:color:) を使用して、各速度分類を表す色をカスタマイズできます。