UIKit ;; Mapkit으로 지도에 현 위치 표시하기 1탄 (지도를 화면에 띄우고, 초기 위치 설정하기)

내가 구현을 맡은 뷰!!

 

지도 하단의 버튼을 눌렀을 때 현재 위치를 지도에 띄워주고, 해당 위치를 하단에 표시해주는 작업이 필요하다.

 

 

---

MapKit 사용 이유

 

지도를 구현할 때는 네이버맵, 카카오맵 등 여러가지 방식이 있지만

Mapkit을 사용하기로 결정했다.

 

이유는 맵킷이 애플에서 제공하는 first party이기도 하고, 타 맵 같은 경우 API를 불러오는 과정이 번거롭다.

 

네이버지도의 경우에는 CocoaPods을 통해서 설치를 해주어야 하기 때문에 번거롭다. 추가로, 키 발급과 더불어 파일 내부에 넣어주는 작업까지 필요하다.

*참고

https://github.com/navermaps/ios-map-sdk

GitHub - navermaps/ios-map-sdk: 네이버 지도 iOS SDK 데모 앱

 

맵킷은 import를 통해 간편하게 맵을 불러와서 내장 함수를 통해 여러가지 작업이 가능하기 때문이다.

그냥 파일에 import Mapkit 한 줄로 사용이 가능하다!

---

MKMapView를 이용해 화면에 지도 띄우기

 

MKMapView(애플이 제공하는 내장형 지도 인터페이스)라는 클래스를 통해 지도를 보여줄 수 있다.

 

 

macOS에서를 제외하고는 UIView 타입이다.

 

 

 

먼저, MapKit을 import한 후, map 객체를 만든다음, 해당 객체를 ui에 띄우면 된다.

import Mapkit

let map = MKMapView()

띄우고 나면, 이렇게 광범위한 지도가 보인다. 처음에는 이 정도도 안 보이고 격자만 보여서 당황했다.

애플 문서를 확인해보니

When you initialize a map view, you specify the initial region for that map to display by setting the region property of the map.

초기에 보여줄 지도를 특정할 수 있다고 한다.

 

 

---

 

setRegion 메서드를 이용해 초기에 보여줄 지도 화면을 구성하기

 

setRegion이라는 메서드를 사용해서 현재 표시되는 region(지역)을 바꾸려고 한다.

mapView.map.setRegion(MKCoordinateRegion(center: defaultLocation,
                                                 span: defaultSpanValue), animated: true)

 

ViewController의 viewDidLoad 내부에 해당 메서드를 넣어주었다.

 

해당 메서드를 분석해보면!!

setRegion 메서드의 파라미터는 region과 animated로 구성되어 있다.

region(맵뷰에서 보여줄 새로운 지역)의 타입은 MKCoordinateRegion,

animated(true로 설정 시 새로운 지역으로 부드럽게 이동, false로 설정 시 즉시 이동) 타입은 Bool이다.

 

 

아하 그러면

setRegion 메서드는 새로운 지역으로 이동하게 해주는 메서드인데,

이동할 새로운 지역은 region으로 받고 이동 방법(부드럽게, 즉시)은 animated로 받아서 이동하는 거군

OKOK

 

 

 

근데 또.. region의 MKCoordinateRegion 타입은 또 무엇인가.. 😇

특정 위도와 경도를 중점으로 둔 사각형의 지리적 지역을 나타내주는 structure이라고 한다.

 

 

MKCoordinateRegion은

지역의 가운데 지점을 나타내는 center(CLLocationCoordinate2D 타입 - 위도, 경도로 위치 얻음),

수직, 수평으로 얼만큼의 지도를 보여줄지를 나타내는 span(MKCoordinateSpan - 지도의 너비, 높이) 으로 이루어져있다.

let defaultLocation = CLLocationCoordinate2D(latitude: 36.0106098, longitude: 129.321296)
let defaultSpanValue = MKCoordinateSpan(latitudeDelta: 0.01, longitudeDelta: 0.01)

초기 위치를 포항 공대로 설정하여 defaultLocation에 저장해주었고

span또한 0.01씩으로 지정해주었다. 해당 크기를 조정해보면 값이 작을수록 지도가 확대되고, 클수록 축소된다.

 

 

여기까지가 MKMapView를 이용해 지도를 화면에 띄워주고,

setRegion 메서드를 통해 초기 위치, 초기 지도를 어떤 크기로 보여줄지를 설정해 띄운 결과!