[SwiftUI] SwiftUI로 Naver Map iOS SDK 연동하기

이번에는 SwiftUI로 Naver Map iOS SDK를 연동해서 지도를 띄워보겠습니다.

 

2022.02.11 기준 Naver Map 최신 버전은 UIKit으로 구현이 가능합니다. 즉, UIView로 구현된 지도를 SwiftUI View로 사용하려면 UIViewRepresentable을 사용해야합니다.

 

UIViewRepresentable에 대한 포스팅은 여기를 확인해주세요! http://.https://k00kie-dev.tistory.com/1

 

 

import Foundation
import SwiftUI
import NMapsMap
import CoreLocation

struct MapView: UIViewRepresentable {
    
    @Binding var selectedLocation: NMGLatLng?
    @ObservedObject var locationManager = LocationManager.sharedInstance
    var view: NMFNaverMapView?
    
    init(selectedLocation: Binding<NMGLatLng?>) {
        _selectedLocation = selectedLocation
    }
    
    func makeUIView(context: Context) -> NMFNaverMapView {
        let view = NMFNaverMapView()
        view.showCompass = true
        view.mapView.positionMode = .disabled
        view.mapView.locationOverlay.hidden = true
        view.mapView.addCameraDelegate(delegate: context.coordinator)
        
        let firstLocation: NMGLatLng
        if locationManager.isAuthorized() {
            view.mapView.zoomLevel = 17
            view.showLocationButton = true
            view.mapView.positionMode = .normal
            let currentLat = Double(locationManager.lastLocation?.coordinate.latitude ?? 37.532600)
            let currentLng = Double(locationManager.lastLocation?.coordinate.longitude ?? 127.024612)
            
            firstLocation = NMGLatLng(lat: currentLat, lng: currentLng)
        } else {
            view.mapView.zoomLevel = 8
            let defaultLat = 37.542600
            let defaultLng = 127.124612
            
            firstLocation = NMGLatLng(lat: defaultLat, lng: defaultLng)
        }
        selectedLocation = firstLocation
        view.mapView.moveCamera(
            NMFCameraUpdate(scrollTo: firstLocation)
        )
        
        self.view = view
        
        return view
    }
    
    func updateUIView(_ uiView: NMFNaverMapView, context: Context) {
        //do nothing
    }
    
    func makeCoordinator() -> Coordinator {
        return Coordinator(selectedLocation: $selectedLocation)
    }
    
    class Coordinator: NSObject, NMFMapViewCameraDelegate, CLLocationManagerDelegate {
        @Binding var selectedLocation: NMGLatLng?
        
        init(selectedLocation: Binding<NMGLatLng?>, view: NMFMapView?) {
            _selectedLocation = selectedLocation
            self.view = view
            super.init()
            
            //위치 오버레이를 표시하지 않으려면 아래 코드 사용
            self.view?.mapView.addObserver(self, forKeyPath: "positionMode", options: [.new, .old, .prior], context: nil)
        }
        
        func mapView(_ mapView: NMFMapView, cameraWillChangeByReason reason: Int, animated: Bool) {
            //do nothing
        }
        
        func mapView(_ mapView: NMFMapView, cameraIsChangingByReason reason: Int) {
            selectedLocation = mapView.cameraPosition.target
        }
        
        func mapViewCameraIdle(_ mapView: NMFMapView) {
            selectedLocation = mapView.cameraPosition.target
        }
        
        func mapView(_ mapView: NMFMapView, cameraDidChangeByReason reason: Int, animated: Bool) {
            selectedLocation = mapView.cameraPosition.target
        }
        
        //위치 오버레이를 표시하지 않으려면 아래 코드 사용
        override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
            if keyPath == "positionMode" {
                view?.mapView.locationOverlay.hidden = true
            }
        }
        
        deinit {
            self.view?.mapView.removeObserver(self, forKeyPath: "positionMode")
        }
    }
}

저는 지도의 첫 위치를 현재 위치로 설정하기 위해 CLLocationManager를 사용하였습니다. CLLocationManager에 대한 내용도 포스팅을 통해 다루어보아야겠네요.

 

네이버 지도는 위치 권한이 허용되어있는 상태이면 지도에 위치 오버레이를 표시해줍니다.(위치 오버레이는 사용자의 현 위치를 파란 원형으로 보여주는 요소입니다.)

요구사항에 따라서는 위치 오버레이를 보이지 않게 하고 싶을 수도 있는데요.

Naver 공식 문서에는 NMFNaverMapView의 locationOverlay.hidden을 true로 설정해주면 된다고 설명되어 있습니다. 하지만 이건 최초에만 보이지 않는 것이고, 사용자가 "현 위치 버튼"(조준점처럼 생긴 버튼)을 누르면 위치 오버레이가 다시 노출됩니다.

네이버 포럼에 문의한 결과, "positionMode"에 대한 옵저버를 생성하고(현 위치 버튼을 누르면 변경되는 값) positionMode가 변경될 때마다 locationOverlay.hidden을 true로 설정해주면 된다고 합니다.