오늘은 MKMapView를 활용하는 방법에 대해 간단하게 정리해보고자 합니다!
현재 사용하고자 하는 View의 구성은 다음과 같습니다!
지도를 보여주는 mapView만 간단하게 추가해놓은 상태입니다.
이때 mapView의 타입은 UIView가 아닌 MKMapView이기 때문에 코드에
import MapKit을 꼭 추가해줘야 합니다.
정확한 위치를 보여주고 싶은 경우 + 핀 추가
let location = CLLocationCoordinate2D(latitude: 37.5030042, longitude: 127.0507571)
let span = MKCoordinateSpan(latitudeDelta: 0.1, longitudeDelta: 0.1)
let region = MKCoordinateRegion(center: location, span: span)
mapView.setRegion(region, animated: true)
let annotation = MKPointAnnotation()
annotation.title = "HERE!!!!"
annotation.coordinate = location
mapView.addAnnotation(annotation)
mapView.delegate = self현재 MapView에 보이는 지역을 변경하고 싶을 때 사용하는 메서드가 setRegion입니다.
이때 필요한 매개변수는 MKCoordinateRegion타입으로 변경하고 싶은 지역의 좌표 정보가 포함돼있어야 합니다.
따라서 원하는 좌표 정보를 담은 MKCoordinateRegion 인스턴스를 생성해줘야합니다.
MKCoordinateRegion
MKCoordinateRegion은 struct로 특정 경도와 위도를 중심으로 둘러싼 사각형 모양의 지역범위를 표시하고 있습니다.
다양한 방식으로 초기화를 시켜줄 수 있지만 init(center:span:)을 사용해보고자 합니다.
이때 center는 CLLocationCoordinate2D타입, span은 MKCoordinateSpan타입입니다. 해당 타입들에 대해서 자세히 알아보겠습니다.
CLLocationCoordinate2D
The latitude and longitude associated with a location, specified using the WGS 84 reference frame.
CLLocationCoordinate2D는 WGS 84 reference 프레임을 사용하여 지정된 위치와 관련된 위도 및 경도 데이터입니다. 이때 WGS 84 reference 프레임이 뭔지는 아직 모르겠지만...
init(latitude:longitude:)초기화 함수를 보니 위도 및 경도 데이터를 이 struct를 활용하여 저장할 수 있는 것으로 보입니다.
let location = CLLocationCoordinate2D(latitude: 37.5176577, longitude: 126.8842201)이렇게 초기화 함수를 사용하여 위치 데이터를 프로퍼티에 할당해주었습니다!
MKCoordinateSpan
MKCoordinateSpan은 우리가 지정해주고자 하는 지역 범위의 폭과 너비를 정해줄 수 있는 struct입니다. 지도의 zoom level을 정할 수 있다고 보면 되는데요 value가 작아질 수록 higher zoom level이 된다고 하니 값이 작을수록 더 확대돼서 보인다고 생각할 수 있습니다.
init(latitudeDelta:longitudeDelta:) 초기화 메서드를 사용해보고자 하는데 이때 각 deltaValue의 타입은 CLLocationDegrees입니다.
CLLocationDegrees는 Type Alias로 새로 정의된 타입인데 기존에는 Double 타입이었으며 도(?) 단위로 명시된 위도 혹은 경도값입니다. 따라서 초기화 구문안에는 Double값을 작성해주면 span값이 결정됩니다.
원하는 정도의 zoom level에 맞게 작성해주면 되는데 이때 어느정도의 값이 어느정도의 확대가 되는지 확인해보기 위해 3가지 경우를 확인해봤습니다.
let span = MKCoordinateSpan(latitudeDelta: 1, longitudeDelta: 1)
let span = MKCoordinateSpan(latitudeDelta: 0.1, longitudeDelta: 0.1)
let span = MKCoordinateSpan(latitudeDelta: 0.001, longitudeDelta: 0.001)
값이 작아질수록 현재 위치의 정확도가 높아지는 것을 확인할 수 있습니다. 구현할 때 원하는 정도의 zoom level에 맞게 값을 할당해주면 될 것 같습니다!
Location 구현
이렇게 setRegion메서드에 들어가는 location과 span에 대해 모두 알아봤으니 region 프로퍼티를 생성할 수 있습니다.
let location = CLLocationCoordinate2D(latitude: 37.5176577, longitude: 126.8842201)
let span = MKCoordinateSpan(latitudeDelta: 0.01, longitudeDelta: 0.01)
let region = MKCoordinateRegion(center: location, span: span)그 후 MapView에 setRegion을 통해 지역을 설정해주면 원하는 지역이 뜨는 것을 확인할 수 있습니다.
mapView.setRegion(region, animated: true)
MKPointAnnotation
지도의 정확한 위치에 핀 및 문자열(title)을 추가하고 싶을 때 사용하는 class입니다.
- 사용하기 위해선 먼저 Class의 인스턴스를 생성해줍니다.
let annotation = MKPointAnnotation()- 해당 위치에 표시하고 싶은 문자열을 title 프로퍼티에 할당해줍니다.
annotation.title = "HERE!!!!"- coordinate는 annotation의 좌표 정보를 담고 있습니다. 즉 핀을 표시하고 싶은 location 정보를 알려주면 됩니다. 위에서 보여주고자 하는 위치와 동일한 곳에 핀을 추가할 것 이기 때문에 location 변수를 그대로 사용해줘도 됩니다.
annotation.coordinate = location- 마지막으로 IBOutlet으로 연결된 mapView에 addAnnotation 메서드를 통해 구현한 annotation 인스턴스를 전달해줍니다.
mapView.addAnnotation(annotation)그런 뒤 실행을 해보면 다음과 같이 좌표가 찍힌 것을 확인할 수 있습니다!
Annotation 클릭 시 이벤트 발생
MKMapView Class는 특정 작업이 완료되는 경우 delegate를 통해 알리게 됩니다. 따라서 mapView와 상호작용을 하기 위해서는 Delegate 연결을 해줘야합니다.
mapView.delegate = self다음과 같이 연결을 해준 뒤 extension을 통해 viewController과 MKMapViewDelegate 프로토콜을 채택하도록 해줍니다.
extension LocationViewController: MKMapViewDelegate {
func mapView(_ mapView: MKMapView, didSelect view: MKAnnotationView) {
print("here~~~~")
}
}다음 메서드를 입력해주면 우리가 원하는 위치에 추가한 annotation을 클릭할 때 마다 디버그 영역에 here가 출력되는 것을 볼 수 있습니다!
뒤에 바로 이어서 Location Privacy & Authorization 관련해서 알아보도록 하겠습니다!
