[iOS] Naver Map SDK 사용해보기 (1)

✨

27th SOPT APPJAM을 진행하면서 네이버지도 SDK를 사용했다. 네이버 지도에 관한 글을 다루는 블로그가 별로 없어서 삽질 좀 했다 😅 다시 공부도 할 겸 하나씩 정리해보려고 한다 〰️❗️

 

네이버지도 SDK 시작하기는 공식문서에 자세하게 나와있기도 하고, 다루는 블로그도 꽤 있어서 생략❗️

 

Storyboard에서 네이버 지도 나타내기

네이버 지도 클래스는 두 가지가 있다.

NMFMapView

• 화면에 그냥 지도를 뿌림

NMFNaverMapView

• 지도를 컨트롤 할 수 있는 인터페이스 요소가 내장되어 있음

 

일단 해보자❗️

• 뷰 컨트롤러 위에 UIView 를 추가한 후, Class를  NMFMapView 나 NMFNaverMapView로 지정해준다.

 

실행 해보자❗️

NMFMapView

• 그냥 지도만 딸랑 나온다

• 개발자가 다 커스텀해서 쓰는 것 !

NMFNaverMapView

• 오른쪽에 지도 확대 축소하는 버튼이 같이 나온다

• 사용자 인터페이스 가이드에 설명되어 있는대로 사용 가능

• 만져 본 결과, 커스텀은 불가능한 듯 하다 !

 

우리팀은 네이버 지도의 여러 부분을 커스텀 해야했기 때문에  NMFMapView 클래스를 사용했다. NMFMapView 만 다룰 예정〰️

 

위치 추적 모드 변경 버튼 만들기

위치 추적 모드

• 위치 추적 모드에 대한 자세한 설명은 위치 가이드에 있다

• 이번에 사용해 볼 모드는 NMFMyPositionDirection, NMFMyPositionCompass 두 가지 !

• 위치 추적 모드를 변경하려면 positionMode 를 변경하면 된다

  naverMapView.positionMode = .direction naverMapView.positionMode = .compass

 

만들어 보자❗️

(기기의 현위치를 나타내려면 CLLocationManager() 를 사용해서 받은 좌표값을 넘겨줘야 하는데 오늘은 맛보기로 버튼만 만들어보겠다 ~,~)

 

버튼을 하나 추가한다

❗

주의할 점 버튼 뿐만 아니라 모든 요소 추가 시, 맵 뷰 밖에 놓아야 제대로 동작한다. 매 우 중 요

 

이렇게 간단쓰하게 배치해줬다.

 

@IBOutlet 연결

• NMapsMap 을 import 해주고,

• 지도 뷰, 위치 버튼을 연결시켜준다

버튼 설정하기

• SetLocationBtn()에서 버튼이 selected상태일 때 타이틀이 "compass"로 바뀌도록 설정

• 버튼 눌렀을 때 locationTapped 함수가 실행되도록 타겟 추가

• locationTapped() 에서 .direction .compass 모드 설정해주기

 

결과 〰️

• viewDidLoad() 에서 함수 호출해주고 실행하면 〰️

 

✨ 완성 ~,~ ✨

지도가 하얗게 보이는 이유는❓

기기에서 이렇게 보일 때 👉 현위치 좌표 안 받아왔기 때문 ! (다음 포스팅에서 다룰 예정)

시뮬레이터에서 이렇게 보일 때 👉 원래 시뮬에서는 현위치 표시가 안된다 ! 현위치를 제대로 확인하려면 기기에서 테스트 필수

 

Uploaded by Notion2Tistory v1.1.0

⚡️소스 코드⚡️

brillantescene/iOS-Study