탐색 UI 수정

iOS용 Navigation SDK를 사용하면 사용자 환경을 수정할 수 있습니다. 어떤 내장 UI 컨트롤과 요소를 선택하여 지도에 표시할 것인지를 결정합니다. 사용자가 지도에 표시할 동작을 지정할 수 있습니다. 또한 탐색 UI의 시각적 모양을 제공합니다. 자세한 내용은 가이드라인 정책 페이지 탐색 UI에 허용되는 수정사항에 관해 자세히 알아보세요.

지도 UI 컨트롤

Navigation SDK는 몇 가지 기본 UI 컨트롤을 제공합니다. iOS용 Google 지도 애플리케이션과 유사합니다. 다음과 같은 작업을 할 수 있습니다. GMSUISettings 클래스를 사용하여 이러한 컨트롤의 표시 여부를 전환합니다. 이 클래스의 변경사항은 지도에 즉시 반영됩니다.

참고: 각 컨트롤의 위치는 있습니다. 컨트롤을 가장자리에서 멀리 옮길 수도 있습니다. 패딩을 설정하는 것입니다.

나침반

Navigation SDK는 화면에 나침반 그래픽을 제공하여 특정 상황에서만 지도 오른쪽 상단에 사용 설정되어 있습니다. 나침반은 카메라의 방향이 맞을 때만 표시됩니다. 다른 방위 (0이 아닌 방위)를 나타냅니다. 사용자가 나침반을 설정하면 카메라가 방위가 0인 위치( 나침반이 곧 사라집니다.

내비게이션이 사용 설정되어 있고 카메라 모드가 켜져 있는 경우 '팔로우 중'으로 설정되어 있으므로 나침반이 계속 표시되며 나침반을 탭합니다. 기울어진 카메라 시점과 전체보기 카메라 시점 간에 전환합니다.

나침반은 기본적으로 비활성화되어 있습니다. 나침반을 사용하려면 GMSUISettings의 compassButton 속성을 true로 변경합니다. 하지만 나침반이 항상 표시되도록 할 수 있습니다.

Swift

mapView.settings.compassButton = true

Objective-C

mapView.settings.compassButton = YES;

내 위치 버튼

내 위치 버튼은 화면 오른쪽 하단에만 표시됩니다. 내 위치 버튼을 사용하는 경우 사용자가 버튼을 클릭하면 사용자의 위치가 사용자의 현재 위치에 초점을 맞추도록 카메라가 움직입니다. 현재 알려져 있습니다 다음과 같이 설정하여 버튼을 사용 설정할 수 있습니다. GMSUISettings의 myLocationButton 속성을 true로 변경합니다.

Swift

mapView.settings.myLocationButton = true

Objective-C

mapView.settings.myLocationButton = YES;

가운데로 재정렬 버튼

내비게이션이 사용 설정된 경우 사용자가 스크롤할 때 중심 재설정 버튼이 표시됩니다. 지도뷰를 표시하고 사용자가 탭하여 지도의 중심을 다시 맞추면 사라집니다. 허용 가운데 맞춤 버튼이 표시되도록 하려면 다음의 recenterButtonEnabled 속성을 설정합니다. GMSUISettings에서 true(으)로 가운데 맞춤 버튼이 표시되지 않도록 하려면 recenterButtonEnabled에서 false(으)로

Swift

mapView.settings.isRecenterButtonEnabled = true

Objective-C

mapView.settings.recenterButtonEnabled = YES;

지도 UI 액세서리

Navigation SDK는 화면에 보이는 UI 액세서리를 iOS 애플리케이션용 Google 지도처럼 내비게이션을 이용할 수 있습니다. 컨트롤의 공개 상태나 시각적 모양을 다음과 같이 조정할 수 있습니다. 이 섹션에 설명되어 있습니다. 여기에서 변경하는 사항은 사용자가 다음 경로를 찾을 수 있습니다.

탐색 머리글 및 바닥글

탐색 중에 탐색 헤더가 화면 상단에 표시되며 탐색 바닥글이 하단에 나타납니다. 탐색 헤더에는 경로상의 다음번 회전의 도로 이름과 방향, 그리고 선회합니다. 탐색 바닥글에는 예상 시간이 표시됩니다. 목적지까지의 거리, 도착 예정 시간이 표시됩니다.

탐색 머리글과 바닥글의 표시 여부를 전환하고 다음 속성을 사용하여 프로그래매틱 방식으로 색상을 설정합니다.

• navigationHeaderEnabled: 탐색 헤더의 사용 여부를 제어합니다. 표시됩니다 (기본값은 true).
• navigationFooterEnabled: 탐색 바닥글을 표시할지 제어합니다. 표시됩니다 (기본값은 true).
• navigationHeaderPrimaryBackgroundColor — 기본을 설정합니다. 탐색 헤더의 배경 색상입니다.
• navigationHeaderSecondaryBackgroundColor: 보조 탐색 헤더의 배경 색상입니다.

다음 코드 예에서는 헤더와 바닥글을 클릭한 다음 navigationHeaderPrimaryBackgroundColor를 파란색으로 설정합니다. navigationHeaderSecondaryBackgroundColor에서 빨간색으로 변경합니다.

Swift

mapView.settings.isNavigationHeaderEnabled = true
mapView.settings.isNavigationFooterEnabled = true
mapView.settings.navigationHeaderPrimaryBackgroundColor = .blue
mapView.settings.navigationHeaderSecondaryBackgroundColor = .red

Objective-C

mapView.settings.navigationHeaderEnabled = YES;
mapView.settings.navigationFooterEnabled = YES;
mapView.settings.navigationHeaderPrimaryBackgroundColor = [UIColor blueColor];
mapView.settings.navigationHeaderSecondaryBackgroundColor = [UIColor redColor];

탐색 액세서리 헤더 뷰

보조 탐색 헤더 뷰를 대체하여 앱을 맞춤설정할 수 있습니다. 자신만의 맞춤 액세서리 보기를 이용할 수 있습니다. 이렇게 하려면 GMSNavigationAccessoryView 프로토콜을 구현합니다. 이 프로토콜에는 필수 메서드: -heightForAccessoryViewConstrainedToSize:onMapView: 현재 위치: 주어진 지도 보기에서 보기에 사용할 수 있는 최대 크기 는 뷰에 필요한 높이를 제공해야 합니다.

그런 다음 setHeaderAccessoryView:를 호출하여 이 뷰를 지도뷰에 전달할 수 있습니다. mapView는 현재 뷰에 애니메이션을 적용한 다음 맞춤 뷰를 합니다. 탐색 헤더가 표시되어야 맞춤 뷰가 디스플레이.

참고: 일부 스마트폰의 경우 지도 뷰가 가로 모드에서 너무 짧을 수 있습니다. 맞춤 뷰가 숨겨집니다.

맞춤 헤더 액세서리 뷰를 삭제하려면 nil을 setHeaderAccessoryView:입니다.

언제든지 뷰 크기를 변경해야 하는 경우 다음을 호출할 수 있습니다. invalidateLayoutForAccessoryView:: 변경해야 하는 뷰를 전달합니다. 있습니다.

예

다음 코드 예에서는 GMSNavigationAccessoryView 프로토콜 이 맞춤 뷰는 맞춤 탐색 헤더 액세서리 뷰입니다.

Swift

class MyCustomView: UIView, GMSNavigationAccessoryView {
…
  func heightForAccessoryViewConstrained(to size: CGSize, on mapView: GMSMapView) -> CGFloat {
    // viewHeight gets calculated as the height your view needs.
    return viewHeight
  }
…
}

let customView = MyCustomView(...)
mapView.setHeaderAccessory(customView)

// At some later point customView changes size.
mapView.invalidateLayout(forAccessoryView: customView)

// Remove the custom header accessory view.
mapView.setHeaderAccessory(nil)

Objective-C

@interface MyCustomView : UIView <GMSNavigationAccessoryView>
…
@end

@implementation MyCustomView
…
- (CGFloat)heightForAccessoryViewConstrainedToSize:(CGSize)size onMapView:(GMSMapView *)mapView {
  // viewHeight gets calculated as the height your view needs.
  return viewHeight;
}
…
@end

MyCustomView *customView = [[MyCustomView alloc] init…];
[_mapView setHeaderAccessoryView:customView];

// At some later point customView changes size.
[_mapView invalidateLayoutForAccessoryView:customView];

// Remove the custom header accessory view.
[_mapView setHeaderAccessoryView:nil];

길찾기 목록

앱에 단계별 안내를 제공할 수 있습니다. 다음 예를 참고하세요. 이를 수행하는 한 가지 방법을 보여줍니다. 이 단계는 사용자 설정에 따라 다를 수 있습니다. 있습니다.

1. GMSNavigator에서 setDestinations 뒤에 진입점 버튼을 사용 설정합니다. (탐색기)이(가) 성공적으로 완료되었으며 탐색기에서 guidanceActive입니다. 사용하도록 설정되었습니다.
2. 사용자가 진입점 버튼을 탭하면 탐색기와 GMSNavigationDirectionsListController (컨트롤러) GMSMapView (mapView)와 연결되어 있습니다.
3. UIViewController의 인스턴스 (뷰 컨트롤러)에 컨트롤러를 추가합니다. 뷰 컨트롤러의 하위 뷰로 directionsListView를 추가합니다. 이 컨트롤러의 reloadData 및 invalidateLayout 메서드를 호출해야 함 이는 UICollectionView의 경우와 같습니다.
4. 앱의 뷰 컨트롤러 계층 구조로 뷰 컨트롤러를 푸시합니다.

를 통해 개인정보처리방침을 정의할 수 있습니다.

참고:

• 경로 목록은 재사용할 수 없으며 다시 생성됩니다.
• 컨트롤러는 탐색기에 대한 약한 참조만 보유합니다.
• 전체 샘플은 프로젝트 설정 섹션에서 언급한 다운로드한 패키지에 포함된 데모 앱을 참고하세요.

다음 코드 예에서는 DirectionsListViewController를 추가하는 방법을 보여줍니다.

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  // Add the directionsListView to the host view controller's view.
  let directionsListView = directionsListController.directionsListView
  directionsListView.frame = self.view.frame
  self.view.addSubview(directionsListView)
  directionsListView.translatesAutoresizingMaskIntoConstraints = false
  directionsListView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
  directionsListView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
  directionsListView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
  directionsListView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
  ...
}

override func viewWillAppear(_ animated: Bool) {
  super.viewWillAppear(animated)
  // Ensure data is fresh when the view appears.
  directionsListController.reloadData()
  ...
}

override func willTransition(to newCollection: UITraitCollection, with coordinator: UIViewControllerTransitionCoordinator) {
  super.willTransition(to: newCollection, with: coordinator)
  // Invalidate the layout during rotation.
  coordinator.animate(alongsideTransition: {_ in
    self.directionsListController.invalidateLayout()
  })
  ...
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];
  // Add the directionsListView to the host view controller's view.
  UIView *directionsListView = _directionsListController.directionsListView;
  directionsListView.frame = self.view.bounds;
  [self.view addSubview:directionsListView];
  directionsListView.translatesAutoresizingMaskIntoConstraints = NO;
  [directionsListView.topAnchor constraintEqualToAnchor:self.view.topAnchor].active = YES;
  [directionsListView.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor].active = YES;
  [directionsListView.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor].active = YES;
  [directionsListView.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor].active = YES;
  ...
}

- (void)viewWillAppear:(BOOL)animated {
  [super viewWillAppear:animated];
  // Ensure data is fresh when the view appears.
  [_directionsListController reloadData];
  ...
}

- (void)willTransitionToTraitCollection:(UITraitCollection *)newCollection
              withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
  [super willTransitionToTraitCollection:newCollection withTransitionCoordinator:coordinator];
  void(^animationBlock)(id <UIViewControllerTransitionCoordinatorContext>context) =
      ^void(id <UIViewControllerTransitionCoordinatorContext>context) {
    [_directionsListController invalidateLayout];
  };
  // Invalidate the layout during rotation.
  [coordinator animateAlongsideTransition:animationBlock
                               completion:nil];
  ...
}

...

이동 진행률 표시줄

이동 진행률 표시줄은 오른쪽 후행 가장자리에 표시되는 세로 막대입니다. 을 표시해야 합니다. 이 기능을 사용 설정하면 사용자의 목적지 및 현재 위치와 함께 있습니다.

사용자는 이 서비스를 통해 향후 발생할 수 있는 문제(예: 교통체증으로 볼 수 있습니다. 그런 다음 다음과 같은 경우 이동 경로를 다시 지정할 수 있습니다. 있습니다. 사용자가 경로를 변경하면 진행률 표시줄이 재설정됩니다. 해당 지점에서 새로운 이동이 시작된 것처럼 할 수 있습니다.

이동 진행률 표시줄에 다음과 같은 상태 표시기가 표시됩니다.

• 교통정보: 향후 트래픽의 상태입니다.

• 현재 위치: 경로상 운전자의 현재 위치입니다.

• 경로 경과: 이동의 경과 부분입니다.

navigationTripProgressBarEnabled을 설정하여 이동 진행률 표시줄을 사용 설정합니다. 속성(GMSUISettings)에 있어야 합니다.

Swift

mapView.settings.isNavigationTripProgressBarEnabled = true

Objective-C

mapView.settings.navigationTripProgressBarEnabled = YES;

신호등 및 정지 표지판

mapView에서 신호등을 켜고 표지판을 정지할 수 있습니다. 다음으로 바꿉니다. 이 기능을 사용하면 사용자는 신호등 또는 정지 표지판을 경로를 따라 아이콘을 표시하여 보다 효율적이고 효율적으로 정확한 경로

기본적으로 iOS용 Navigation SDK에서는 신호등과 정지 표지판이 사용 중지되어 있습니다. 사용 설정 이 기능을 사용하려면 각 옵션의 GMSMapView 설정을 독립적으로 호출합니다. showsTrafficLights 및 showsStopSigns.

Swift

mapView.settings.showsTrafficLights = true
mapView.settings.showsStopSigns = true

Objective-C

mapView.settings.showsTrafficLights = YES;
mapView.settings.showsStopSigns = YES;

속도계 컨트롤

내비게이션이 사용 설정되고 이동 모드가 운전으로 설정된 경우 Navigation SDK는 iOS의 경우 는 지도의 하단 모서리에 속도를 높여야 합니다. 운전자가 속도 제한을 초과하면 제어 장치는 펼쳐져 운전자의 현재 속도가 포함된 두 번째 속도계를 표시합니다.

알림 수준을 설정하여 속도계 디스플레이의 형식을 변경할 수 있습니다. 운전자가 제한 속도를 지정된 양만큼 초과하는 경우. 예를 들어 현재 속도가 빨간색 텍스트로 표시되도록 빨간색 배경색으로 차량이 제한 속도를 5mph 초과 운전자가 제한 속도를 10mph 초과했을 때

속도 제한 컨트롤을 표시하려면shouldDisplaySpeedometer GMSUISettings에서 true(으)로 속도 제한 제어가 표시되지 않도록 하려면 shouldDisplaySpeedometer에서 false(으)로

Swift

mapView.shouldDisplaySpeedometer = true

Objective-C

mapView.shouldDisplaySpeedometer = YES;

속도계 알림 설정에 대한 자세한 내용은 속도계 알림을 구성합니다.

목적지 마커

GMSUISettings의 showsDestinationMarkers 속성입니다. 다음 예를 참고하세요. - 목적지 마커 사용 중지가 표시됩니다.

Swift

mapView.settings.showsDestinationMarkers = false

Objective-C

mapView.settings.showsDestinationMarkers = NO;

참고: 커스텀 이미지를 마커로 지정할 수 있지만 SDK는 는 현재 이러한 이미지에 텍스트로 라벨을 지정할 수 있도록 지원합니다. 자세한 내용은 마커

지도 환경 기능

Navigation SDK는 탐색 환경을 추가로 맞춤설정할 수 있습니다. 변경사항 사용자의 다음 앱 업데이트 중에 인스턴스가 반영되도록 합니다.

기본 지도 동작 사용 중지

지도의 기본 동작을 사용 중지하려면 GMSUISettings 클래스: GMSMapView의 속성으로 사용할 수 있습니다. 다음 제스처는 프로그래밍 방식으로 활성화/비활성화할 수 있습니다. 참고: 동작을 사용 중지해도 카메라에 대한 프로그래매틱 액세스가 제한되지 않습니다. 설정을 변경할 수 있습니다.

• scrollGestures — 스크롤 동작의 사용 설정 또는 사용 설정 여부를 제어합니다. 사용 중지됩니다. 이 제스처가 활성화된 경우, 사용자가 카메라를 스와이프해서 패닝할 수 있습니다.
• zoomGestures: 확대/축소 동작의 사용 설정 여부를 제어합니다. 또는 사용 중지됩니다. 사용 설정하면 사용자가 두 번 탭, 두 손가락으로 탭 또는 손가락을 모으거나 벌려 카메라를 확대/축소할 수 있습니다. scrollGestures 시 두 번 탭하거나 손가락을 모읍니다. 는 카메라를 지정된 지점으로 패닝할 수 있습니다.
• tiltGestures: 기울이기 동작의 사용 설정 또는 설정 여부를 제어합니다. 사용 중지됩니다. 사용 설정된 경우 사용자가 두 손가락을 사용하여 위아래로 스와이프할 수 있습니다. 카메라를 기울입니다.
• rotateGestures: 회전 동작의 사용 설정 여부를 제어합니다. 또는 사용 중지됩니다. 사용 설정하면 사용자가 두 손가락 회전 동작을 사용하여 카메라를 회전합니다.

이 예에서는 화면 이동 및 확대/축소 동작이 모두 비활성화되어 있습니다.

Swift

mapView.settings.scrollGestures = false
mapView.settings.zoomGestures = false

Objective-C

mapView.settings.scrollGestures = NO;
mapView.settings.zoomGestures = NO;

위치 컨트롤 및 UI 요소

컨트롤의 위치를 기준으로 컨트롤과 기타 UI 요소를 탐색 머리글과 바닥글을 만들 수 있습니다.

• navigationHeaderLayoutGuide
• navigationFooterLayoutGuide

다음 코드 예에서는 레이아웃 가이드를 사용하여 한 쌍의 라벨을 지정할 수 있습니다.

Swift

/* Add a label to the top left, positioned below the header. */
let topLabel = UILabel()
topLabel.text = "Top Left"
mapView.addSubview(topLabel)
topLabel.translatesAutoresizingMaskIntoConstraints = false
topLabel.topAnchor.constraint(equalTo: mapView.navigationHeaderLayoutGuide.bottomAnchor).isActive = true
topLabel.leadingAnchor.constraint(equalTo: mapView.leadingAnchor).isActive = true

/* Add a label to the bottom right, positioned above the footer. */
let bottomLabel = UILabel()
bottomLabel.text = "Bottom Right"
mapView.addSubview(bottomLabel)
bottomLabel.translatesAutoresizingMaskIntoConstraints = false
bottomLabel.bottomAnchor.constraint(equalTo: mapView.navigationFooterLayoutGuide.topAnchor).isActive = true
bottomLabel.trailingAnchor.constraint(equalTo: mapView.trailingAnchor).isActive = true

Objective-C

/* Add a label to the top left, positioned below the header. */
UILabel *topLabel = [[UILabel alloc] init];
topLabel.text = @"Top Left";
[view addSubview:topLabel];
topLabel.translatesAutoresizingMaskIntoConstraints = NO;
[topLabel.topAnchor
    constraintEqualToAnchor:mapView.navigationHeaderLayoutGuide.bottomAnchor].active = YES;
[topLabel.leadingAnchor constraintEqualToAnchor:mapView.leadingAnchor].active = YES;

/* Add a label to the bottom right, positioned above the footer. */
UILabel *bottomLabel = [[UILabel alloc] init];
bottomLabel.text = @"Bottom Right";
[view addSubview:bottomLabel];
bottomLabel.translatesAutoresizingMaskIntoConstraints = NO;
[bottomLabel.bottomAnchor
    constraintEqualToAnchor:mapView.navigationFooterLayoutGuide.topAnchor].active = YES;
[bottomLabel.trailingAnchor constraintEqualToAnchor:mapView.trailingAnchor].active = YES;

대체 경로 숨기기

사용자 인터페이스가 너무 많은 정보로 복잡해지면 기본값 (2개)보다 적은 대체 경로를 표시하여 혼잡성 감소 대체 경로가 아예 표시되지 않도록 합니다. 이 옵션을 구성하기 전에 GMSNavigationRoutingOptions을 구성하고 다음 명령어를 설정하여 경로를 가져옵니다. 다음 열거형 값 중 하나를 갖는 alternateRoutesStrategy입니다.

열거형 값	설명
GMSNavigationAlternateRoutesStrategyAll	기본값입니다. 최대 2개의 대체 경로를 표시합니다.
GMSNavigationAlternateRoutesStrategyOne	1개의 대체 경로를 표시합니다 (사용 가능한 경우).
GMSNavigationAlternateRoutesStrategyNone	대체 경로를 숨깁니다.

예

다음 코드 예는 대체 경로를 모두 숨기는 방법을 보여줍니다.

Swift

let routingOptions = GMSNavigationRoutingOptions(alternateRoutesStrategy: .none)
navigator?.setDestinations(destinations,
                           routingOptions: routingOptions) { routeStatus in
  ...
}

Objective-C

GMSNavigationRoutingOptions *routingOptions = [[GMSNavigationRoutingOptions alloc] initWithAlternateRoutesStrategy:GMSNavigationAlternateRoutesStrategyNone];
[navigator setDestinations:destinations
            routingOptions:routingOptions
                  callback:^(GMSRouteStatus routeStatus){...}];

경고: 이 기능은 현재 최단 경로 라우팅과 호환되지 않습니다. 선호합니다. 두 특성을 동시에 사용하면 예상치 못한 확인할 수 있습니다.