[SwiftUI] MapKit으로 Annotation 놓기 (iOS 17+)

Map에서 Annotation은 지도에 놓는 핀과 같은 요소입니다.

애플 파크 뿐만 아니라 그 주변의 모든 주석이 Annotation입니다.

 

SwiftUI에서 Mapkit을 가져오고, Annotation을 어떻게 적용하는지 알아봅시다.

 

---

Mapkit 사용하기

우선, MapKit을 사용하기 위해서는 초기 위치 설정이 필요합니다.

import SwiftUI
import MapKit

struct MapView: View {
    @State private var position = MapCameraPosition.region(MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 37.5665, longitude: 126.9780),
        span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
    ))
    
    var body: some View {
    	Map(position: $position)
    }
}

 

우선 위의 코드를 보게 되면, @State로 position이라는 변수를 만들고, 여기에 각각의 값을 넣습니다.

 

MKCoordinateRegion은 center와 span 값을 가지는데, 각각 값의 의미는 다음과 같습니다. 

 

center는 Map의 중심 좌표를 의미하며, latitude와 longitude를 가지는 CLLocationCoordinate2D로 선언합니다.

 

span은 지도를 보여주는 범위를 의미합니다. MKCoordinateSpan으로 선언하며, latitudeDelta, longitudeDelta를 수정하여 보여주는 범위를 수정할 수 있습니다.

 

---

 

Annotation 추가하기

Annotation은 Map 안에서 리스트의 Row를 선언하듯 ForEach를 통해 적용할 수 있습니다.

 

우선 코드를 확인해보겠습니다.

import SwiftUI
import MapKit

struct MapView: View {
    @State private var position = MapCameraPosition.region(MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 37.5665, longitude: 126.9780),
        span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
    ))
    
    @State var locations = [Location(title: "위치 이름", 
                            coordinate: CLLocationCoordinate2D(latitude: 37.000, longitude: 126.9000))]
    
    var body: some View {
    	Map(position: $position) {
        	ForEach(locations) { location in
            	Annotation(location.title, coordinate: location.coordinate) {
                	Image("Annotation")
                }
            }
        }
    }
}

 

보시는 것과 같이, Annotation 객체를 이용해서 간단하게 맵 위에 위치를 표시할 수 있습니다.

 

우선, Annotation은 title(위치 이름 또는 제목)과 coordinate(위치 정보)를 변수로서 적용해주어야 합니다.

 

또한, 추가적인 View를 생성하여 커스텀된 Annotation 형태나 추가적인 텍스트 정보 등을 제공할 수 있습니다.

 

다만, Annotation은 .onTab 모디파이어를 지원하지 않기 때문에, 만약 Annotation에 대한 터치 이벤트를 만들고 싶다면 내부 View를 생성하여 해당 부분에 .onTab을 적용하면 정상적으로 작동합니다.