オンデマンド配車および配達ソリューションは現在、一部のパートナー様のみご利用いただけます。

このページは Cloud Translation API によって翻訳されました。

iOS UI のカスタマイズ

Consumer SDK を使用すると、アプリのデザインにカスタムマーカーを適用したり、ポリラインのルートを指定したりすることができます。これらのデザイン要素により、コンシューマアプリは車両のルートの動的なプレビューを表示できます。

このガイドでは、SDK が consumerMapStyleCoordinator プロパティで提供するオプションについて説明します。このプロパティは GMTCMapView クラスを通じて使用できます。ここでは UI 要素についてのみ説明します。コンシューマアプリが機能していることを前提としています。Consumer SDK に必要なバックエンドサービスの設定については、Fleet Engine のスタートガイドをご覧ください。

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

カスタムのマーカー

次の例では、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 に設定すると、マーカーが「オフ」になります。独自の UI 要素を代わりに使用できるように、十分な量のデータを提供する必要があります。

例

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 は、「Trip」と「Order Progress」全体を通して表示されます。GMTCPolylineType.activeRoute は、乗車地点か降車地点かにかかわらず、乗客の次の地点まで車両が通るルートです。GMTCPolylineType.remainingRoute は、車両が GMTCPolylineType.activeRoute を完了した後に残るルートのセグメントです。

ポリラインのプロパティ

各ポリラインで使用できるカスタマイズ可能なプロパティは、Google マップ PolylineOptions で提供されるプロパティのサブセットです。Consumer 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 の 4 つの速度のいずれかで表されます。各速度分類を表す色は、setTrafficColorFor(_:color:) でカスタマイズできます。

iOS UI のカスタマイズ

UI カスタマイズ オプションの初期化

Swift

Objective-C

カスタムのマーカー

Swift

Objective-C

マーカーの種類

マーカーのオプション

例

Swift

Objective-C

乗車マーカーの到着予定時刻を動的に更新

例

Swift

Objective-C

カスタム ポリライン

Swift

Objective-C

ポリラインのタイプ

ポリラインのプロパティ

例

Swift

Objective-C

交通状況に対応したポリライン

UI カスタマイズオプションの初期化

カスタムポリライン