[swift | ios] 네이버 지도 API로 현위치 트래킹, 마커 표시 해보기

사전 세팅

- Snapkit으로 View 띄워보기 (스토리보드 없이)

- Naver Maps Client Id Xcode에 추가해놓기

 

구현해볼 기능

- 네이버 지도를 화면에 띄워보기

- 현재위치 좌표 (위도, 경도) 구하기

- 현재위치로 카메라 이동

- 현재위치에 마커 표시해보기

 

1. 네이버 지도를 화면에 띄워보기!

Naver Maps Client Id를 미리 Xcode에 세팅해놓은 후,

Cocoapods로 naver map 관련 의존성을 추가해주어야 한다.

pod 'NMapsMap'

프로젝트 내부의 Podfile에 위와 같이 추가해준 후, xcode가 켜져있다면 종료한 후에 아래 명령어로 install을 해준다.

pod install

그렇지만, M1 맥북을 사용하는 사람들은 CPU가 기존 intel CPU와 달라서, 위 명령어로는 실행이 안될 것이다.

arch -x86_64 pod install

이렇게 실행을 해주면 제대로 실행이 될 것이다. (애플 실리콘 CPU도 얼른 호환성이 좋아졌으면 좋겠다.)

 

의존성을 추가하고 실행해준 후, git-lfs를 설치해주어야한다.

git-lfs를 설치해야하는 이유는 대용량의 바이너리 데이터를 받기 위해서라고 한다. (git-lfs 에러를 해결하지 않으면, 빌드할 때 에러가 날것이다)

맥 사용자의 경우, brew로 쉽게 설치가 가능하다.

설치법은 아래 링크를 참조하면 된다.

https://newsight.tistory.com/330

Git LFS (Large File Storage) 사용하기

 

설치를 끝낸 후에는, 다시 xcworkspace로 xcode를 열어주자.

open 프로젝트이름.xcworkspace

 

이제 본격적으로 코딩을 할 시간이다.

의외로 코드는 매우 간단하다.

import NMapsMap

class MainViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let mapView = NMFMapView(frame: view.frame)
        view.addSubview(mapView)
    }
}

맵을 띄워주고자 하는 viewController에 viewDidLoad() 함수 내부에 NMFMapView() 함수로 mapview를 만들어주고,

view.addSubview()의 파라미터로 mapView를 전달해주면 바로 네이버지도 화면이 띄워진다.

 

2. 현재 위치 좌표 가져오기

사실, NMFMapView()가 아니라, NMFNaverMapView()를 사용하면 showLocationButton() 함수를 사용해서 현위치를 트래킹할 수 있는 버튼을 만들 수 있다. (아래 그림 왼쪽의 현위치 트래킹 버튼)

혹시 이게 필요할 수도 있으니, 코드는 첨부해둔다.

let mapView = NMFNaverMapView(frame: view.frame)
mapView.showLocationButton()
view.addSubview(mapView)

그렇지만 내가 하고싶었던 것은 화면에 처음으로 들어가자마자 내 현위치를 기준으로 화면이 뜨는거였다.

그래서, 현위치 좌표를 가져온 후 -> 좌표로 지도가 카메라가 이동 -> 해당 좌표에 마커 표시 순서로 해보기로 했다.

 

우선 , 현위치 좌표를 가져오기 위해서는 CoreLocation이라는 모듈을 사용한다.

CoreLocation을 임포트 해준 후, CLLocationManagerDelegate를 상속시켜줘야 한다.

import CoreLocation
import NMapsMap

class MainViewController: UIViewController, CLLocationManagerDelegate {
    
    var locationManager = CLLocationManager()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let mapView = NMFMapView(frame: view.frame)
        view.addSubview(mapView)
        
        locationManager.delegate = self
        locationManager.desiredAccuracy = kCLLocationAccuracyBest
        locationManager.requestWhenInUseAuthorization()
        
        if CLLocationManager.locationServicesEnabled() {
            print("위치 서비스 On 상태")
            locationManager.startUpdatingLocation()
            print(locationManager.location?.coordinate)
        } else {
            print("위치 서비스 Off 상태")
        }

    }
}

CLLocationManager() 객체를 만들고, 그 객체에서 다양한 값을 세팅해 줄 것이다. (delegate, desiredAccuracy, requestWhenInUseAuthroization)

여기서 requestWhenInUseAuthorization()은 위치 서비스 권한을 허용할 것인지 묻는 팝업이다.

(이미지 출처 : https://support.apple.com/ko-kr/HT203033)

그 다음, 위치 권한이 허용되어 있을 경우에만 (locationServicesEnabled())

locationManager.startUpdatingLocation() 구문이 현재 위치를 가져와준다.

locationManager.location?.coordinate로 위도, 경도가 가져와지는데, 강강 locationManager.location?.coordinate.latitude, locationManager.location?.coordinate.longitude로 가져올 수 있다.

(코드 참고 : https://swift-it-world.tistory.com/24)

 

그런데, 아무 세팅 없이 위 코드만 실행해보면 아무것도 뜨지 않을것이다.

이와 관련된 세팅을 info.plist에서 해주어야한다.

ios 10 이후 버전으로 코딩하는 사람이라면, 아래 세가지를 반드시 넣어줘야 한다.

<string> 안에 들어가는 문구는 위의 이미지에서 팝업과 함께 나올 문구를 정하는 부분이다.

<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>NSLocationAlwaysUsageDescription</key>
	<string>위치정보 권한이 필요합니다.</string>
	<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
	<string>위치정보 권한이 필요합니다.</string>
	<key>NSLocationWhenInUseUsageDescription</key>
	<string>위치정보 권한이 필요합니다.</string>

 

3. 현재위치로 카메라 이동

현재위치로 카메라 이동은, NMFCameraUpdate()를 통해 할 수 있다.

NMGLatLng (네이버 API 좌표 객체)에 각각 lat, lng을 채워서 파라미터로 넣어주면 된다.

이 때, 움직이는 애니메이션을 넣고 싶다면 .animation으로 설정해줄 수 있다.

종류는 네이버 지도 API Docs에서 볼 수 있다.

참고: https://navermaps.github.io/ios-map-sdk/guide-ko/3-2.html

카메라 이동 · NAVER Map iOS SDK

mapView의 moveCamera 함수로 최종적으로 카메라가 이동한다.

import CoreLocation
import NMapsMap

class MainViewController: UIViewController, CLLocationManagerDelegate {
    
    var locationManager = CLLocationManager()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let mapView = NMFMapView(frame: view.frame)
        view.addSubview(mapView)
        
        locationManager.delegate = self
        locationManager.desiredAccuracy = kCLLocationAccuracyBest
        locationManager.requestWhenInUseAuthorization()
        
        if CLLocationManager.locationServicesEnabled() {
            print("위치 서비스 On 상태")
            locationManager.startUpdatingLocation()
            print(locationManager.location?.coordinate)
            
            //현 위치로 카메라 이동
            let cameraUpdate = NMFCameraUpdate(scrollTo: NMGLatLng(lat: locationManager.location?.coordinate.latitude ?? 0, lng: locationManager.location?.coordinate.longitude ?? 0))
            cameraUpdate.animation = .easeIn
            mapView.moveCamera(cameraUpdate)
            
        } else {
            print("위치 서비스 Off 상태")
        }

    }
}

 

4. 현재 위치 마커 찍기

마커는 NMFMarker()로 할 수 있다. NMFMarker() 객체를 만들어 준 후, position을 정해주면 끝이다. 엄청 간단하다.

position도 역시, 위도 경도로 NMGLatLng 객체를 만들어서 설정하면된다.

import CoreLocation
import NMapsMap

class MainViewController: UIViewController, CLLocationManagerDelegate {
    
    var locationManager = CLLocationManager()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let mapView = NMFMapView(frame: view.frame)
        view.addSubview(mapView)
        
        locationManager.delegate = self
        locationManager.desiredAccuracy = kCLLocationAccuracyBest
        locationManager.requestWhenInUseAuthorization()
        
        if CLLocationManager.locationServicesEnabled() {
            print("위치 서비스 On 상태")
            locationManager.startUpdatingLocation()
            print(locationManager.location?.coordinate)
            
            //현 위치로 카메라 이동
            let cameraUpdate = NMFCameraUpdate(scrollTo: NMGLatLng(lat: locationManager.location?.coordinate.latitude ?? 0, lng: locationManager.location?.coordinate.longitude ?? 0))
            cameraUpdate.animation = .easeIn
            mapView.moveCamera(cameraUpdate)
            
            let marker = NMFMarker()
            marker.position = NMGLatLng(lat: locationManager.location?.coordinate.latitude ?? 0, lng: locationManager.location?.coordinate.longitude ?? 0)
            marker.mapView = mapView
        } else {
            print("위치 서비스 Off 상태")
        }

    }
}

 

이렇게 코드를 쳐서 실행해보면, 현재 위치에 마커가 찍혀있는 것을 볼 수 있다.