iOS UI 맞춤설정

Consumer SDK를 사용하면 맞춤 마커를 적용하고 앱 디자인에 전달할 수 있습니다. 이러한 디자인 요소를 통해 소비자는 앱을 사용하여 차량 경로의 동적 미리보기를 표시합니다.

이 가이드에서는 SDK가 consumerMapStyleCoordinator 속성입니다. 이 속성은 다음을 통해 이용할 수 있습니다. GMTCMapView 클래스 여기에서는 UI 요소만 다루며, 소비자 앱을 만들 수 있습니다. 백엔드 설정에 대한 자세한 내용은 자세히 알아보려면 Fleet Engine 시작하기

UI 맞춤설정 옵션 초기화

처음에 UI 맞춤설정 옵션을 설정하는 데 사용되는 권장 콜백입니다. GMTCMapViewDelegate에서 선언됩니다. mapViewDidInitialize GMTCMapView 객체가 지도를 렌더링할 준비가 되면 콜백이 트리거됩니다. 스타일 코디네이터가 초기화되었지만 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:) 맞춤 마커 옵션은 소비자 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 소비자 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이(가) 표시됩니다. 할 수 있습니다. 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:)를 사용합니다.