[iOS/Swift] 네이버 지도 API 사용하기 ii

네이버 지도 뷰에 임베드 하기

 // 먼저 NMFNaverMapView 객체를 생성해줍니다
 let naverMapView = NMFNaverMapView(frame: UIScreen.main.bounds)
 
 override func viewDidLoad() {
 	// 슈퍼뷰에 지도 뷰를 서브뷰로 넣어줍니다
	view.addSubview(naverMapView)
 }

네이버 지도를 뷰에 넣어주게 되면 네이버 지도가 영롱하게 실행되는 것을 볼 수 있습니다. 

하지만 이렇게 지도만 나온다고 해서 모두 끝이 아니니까 네이버 지도에서 제공해주는 기능들을 한번 천천히 알아보겠습니다.

지도

카메라 이동

• 지도에서 카메라 이동을 코드로 진행할 때 필요합니다
• 네이버의 모든 좌표 체계는 NMGLatLng로 구성이 되어 있다고 생각하면 편합니다

    naverMapView.moveCamera(NMFCameraUpdate(scrollTo: NMGLatLng(lat:, lng:)))

줌 레벨

• 지도에서 보여질 수 있는 줌의 상한선과 하한선을 설정할 수 있습니다. 
• 지도의 줌 레벨은 0~20까지 있어서 프로젝트에 맞게 유동적으로 처리하면 될 거 같습니다.

naverMapView.minZoomLevel = 5.0
naverMapView.maxZoomLevel = 10.0

오버레이

네이버에서 다양한 모양의 오버레이를 제공합니다

전 유저의 현재위치를 중심으로 250m 반지름을 갖는 원을 만들어야 해서 사용했습니다

private let circleOverlay: NMFCircleOverlay = NMFCircleOverlay().then {
        $0.radius = 250
        $0.fillColor = .blue
}

radius

• 설정하고자 하는 오버레이의 반지름입니다. 미터 단위로 넣어주면 됩니다

fillColor

• 오버레이를 채우는 색깔입니다

mapView

• 오버레이를 실제 지도 뷰에 보여줄 때 사용합니다

circleOverlay.mapView = naverMapView

마커

마커는 NMFMarker 객체를 만들어야 합니다.

NMFMarker에서 여러 프로퍼티들이 있지만 제가 사용한 것만 오늘 끄적여 보겠습니다. 

mapView

- marker의 mapView 프로퍼티에 현재 보이는 mapView를 넣어줘야 마커가 지도에 보이게 됩니다

marker.mapView = naverMapView

Position 

•  마커를 표시하고자 하는 좌표를 입력해주면 됩니다.
•  좌표를 추가하고 싶을땐 NMFLatLng 객체를 생성한 후 위도와 경도를 넣어주면 됩니다

iconImage

• 마커에 어떤 이미지를 넣고자 할 때 사용합니다. 
• NMFOverlayImage 인스턴스를 생성한 후 마커의 iconImage에 넣어주면 됩니다
• 네이버 공식 문서에 따르면 NMFOverlayImage는 비트맵 이미지를 나타내는 클래스입니다. 이 객체는 비트맵을 다루기 때문에 메모리 관리에 신경 써야 합니다. 
• 아래는 공식 문서에 나와 있는 예제 입니다.

// Good: marker1, 2가 같은 비트맵을 공유
let image = NMFOverlayImage(name: "marker_icon")
marker1.iconImage = image
marker2.iconImage = image

// Bad: marker3, 4가 비트맵을 중복해서 사용
marker3.iconImage = NMFOverlayImage(name: "marker_icon")
marker4.iconImage = NMFOverlayImage(name: "marker_icon")

// Good: marker1, 2가 같은 비트맵을 공유
let image = NMFOverlayImage(image: bitmap)
marker1.iconImage = image
marker2.iconImage = image

// OK: marker3, 4가 다른 NMFOverlayImage 객체를 사용하지만 참조하는 리소스가 같으므로 비트맵도 공유
marker3.iconImage = NMFOverlayImage(image: bitmap)
marker4.iconImage = NMFOverlayImage(image: bitmap)

• NMFOverlayImage(name: )을 사용해서 인스턴스를 생성할 경우 중복해서 사용하지 않도록 조심해야 합니다. 하지만 NMFOverlayImage(image: )를 사용하는 경우 참조하는 UIImage가 똑같기 때문에 비트맵도 공유됩니다. 

userInfo

• 마커에 어떤 정보를 담고 싶을 때 주로 사용합니다
• 데이터 형식은 [String: Any]이므로 어떤 값을 사용하고 싶을 때 꼭 Type Casting 하는 것을 잊으면 안 됩니다.

width & height

• 마커의 높이와 넓이를 지정하는 것입니다. 

touchHandler

• 마커가 터치됐을 때 실행되는 클로저입니다.
• 마커가 터치 됐을 때 마커가 커지거나 이미지가 달라지는 작업을 하기 위해선 여기서 사용해야 합니다.
• 클로저는(NMFOverlay) -> Bool 이렇게 구현이 되어있습니다
  • 마커를 터치했는데 NMFOverlay가 나와서 당황스러울 수 있지만 마커가 NMFOverlay를 상속받기 때문에 NMFMarker로 타입 캐스팅해서 사용해도 되고 자유롭게 사용하면 됩니다
  • 반환 값으로 Bool값을 리턴하게 되어 있는데 true를 리턴하면 터치 이벤트가 지도까지 않고 마커에서 멈춥니다. 하지만 false를 리턴하면 터치 이벤트가 마커를 뚫고 지도 뷰까지 전달될 수 있습니다
  • 마커를 터치했을 때의 이벤트와 그냥 지도를 터치 했을 때의 이벤트를 분리하기 위해선 항상 true를 반환하면 됩니다.

 

https://navermaps.github.io/ios-map-sdk/guide-ko/5-2.html

마커 · NAVER Map iOS SDK

네이버 지도 Delegate

네이버 지도에는 여러 Delegate를 사용할 수 있는데 저는 이번 프로젝트에서 사용했던 두 가지 Delegate를 소개하도록 하겠습니다.

카메라 Delegate

naverMapView.addCameraDelegate(delegate: self)

위와 같이 선언할 수 있습니다. 위와 같이 사용해서 위임할 수 있습니다. 

카메라 이동

func mapView(_ mapView: NMFMapView, cameraWillChangeByReason reason: Int, animated: Bool) {

}

• 화면이 움직였을 때 호출됩니다
• 코드로 지도 화면이 움직이거나 터치로 움직이는 것과 상관없이 모두 호출됩니다.
• 하지만 매개변수로 주어지는 reason을 통해 어떤 이유로 지도뷰가 스크롤됐는지 알 수 있습니다.
  • 0은 개발자의 코드로 화면이 움직였을 때
  • -1 사용자의 제스처로 화면이 움직였을 때
  • -2 버튼 선택으로 카메라가 움직였을 때
  • -3 네이버 지도가 제공하는 위치 트래킹 기능으로 카메라가 움직였을 때

카메라가 멈췄을 때

func mapViewCameraIdle(_ mapView: NMFMapView) {

}

• 카메라 이동이 멈췄을 때 호출되는 함수입니다.

터치 Delegate

naverMapView.touchDelegate = self

지도 터치

func mapView(_ mapView: NMFMapView, didTapMap latlng: NMGLatLng, point: CGPoint) {

}

• 지도를 터치했을 때 호출되는 함수입니다.
• 마커를 터치하고 마커의 touchHandler에서 true를 반환하면 해당 함수는 호출되지 않지만 false를 반환하면 해당 함수가 호출됩니다.
• BottomSheet가 올라와 있고 지도를 터치했을 때 BottomSheet를 없애고 싶으면 그때 이 함수를 사용하면 좋을 거 같습니다

https://navermaps.github.io/ios-map-sdk/reference/Protocols/NMFMapViewCameraDelegate.html

NMFMapViewCameraDelegate Protocol Reference

https://navermaps.github.io/ios-map-sdk/reference/Protocols/NMFMapViewTouchDelegate.html

NMFMapViewTouchDelegate Protocol Reference

제가 오늘 소개한 것은 네이버지도 API에서 제공하는 아주 일부분이니 사용하실 때 공식문서에 들어가셔서 한번 확인해보시는 걸 추천합니다

https://navermaps.github.io/ios-map-sdk/guide-ko/

Home · NAVER Map iOS SDK