[SwiftUI] MapKit - 기본

MapKit 설명

SwiftUI는 iOS, macOS, watchOS 및 tvOS에서 사용자 인터페이스를 구축하는 데 사용되는 Map 프레임워크입니다. iOS 기준으로 iOS 14버전 이상부터 사용할 수 있습니다.

SwiftUI에서 제공하는 Map 뷰를 사용하면 지도를 표시하고, 마커와 같은 추가 요소를 사용하여 위치 정보를 시각화할 수 있습니다.

 

SwiftUI Map 예시 코드

import SwiftUI
import MapKit

struct ContentView: View {
    @State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194),
        span: MKCoordinateSpan(latitudeDelta: 0.1, longitudeDelta: 0.1)
    )
    
    var body: some View {
        Map(coordinateRegion: $region)
    }
}

기본적으로 Map은 Binding<MKCoordinateRegion> 인자를 가지게 됩니다. 

Binding이기 때문에 View에서는 @State 프로퍼티를 이용하여 사용하게 해줍니다.

 

기본 Map

MKCoordinateSpan은 지도의 특정 영역을 나타내는 데 사용되는 구조체입니다. 

이 구조체는 지도에서 표시되는 영역의 크기를 위도와 경도로 정의합니다.

MKCoordinateSpan 구조체는 latitudeDelta와 longitudeDelta 두 개의 속성을 가지고 있습니다.

• latitudeDelta는 영역의 위도 범위를 나타냅니다. 이 값은 위도에 따른 지도의 높이를 결정합니다.
• longitudeDelta는 영역의 경도 범위를 나타냅니다. 이 값은 경도에 따른 지도의 너비를 결정합니다.

MKCoordinateSpan을 사용하여 지도의 축척을 설정할 수 있으며, 이를 통해 지도에서 보여주는 영역의 크기를 조절할 수 있습니다. 예를 들어, latitudeDelta와 longitudeDelta 값을 줄이면 지도의 축척이 커져 더 세부적인 영역을 볼 수 있고, 값을 늘리면 지도의 축척이 작아져 넓은 영역을 볼 수 있습니다.

위에서 제공한 예제 코드에서는 MKCoordinateSpan(latitudeDelta: 0.1, longitudeDelta: 0.1)을 사용하여 샌프란시스코를 중심으로 한 지도 영역을 설정했습니다. 이 설정에 따라 지도의 높이와 너비가 각각 0.1도 차이를 두고 표시됩니다. 이 값을 조절하여 원하는 지도 영역의 크기를 설정할 수 있습니다.

 

 

기능 및 예시 코드

1. 사용자 위치 표시

사용자의 현재 위치를 지도에 표시하려면, showsUserLocation 속성을 true로 설정하면 됩니다.

(당연하지만 현재 위치를 지도에 표시하려면 위치 권한을 받아야 합니다.)

Map(coordinateRegion: $region, showsUserLocation: true)

2. 어노테이션 추가

지도에 어노테이션을 추가하려면, MapAnnotation 뷰를 사용하여 지정된 좌표에 마커를 표시할 수 있습니다.

import SwiftUI
import MapKit

struct ContentView: View {
    @State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194),
        span: MKCoordinateSpan(latitudeDelta: 0.1, longitudeDelta: 0.1)
    )

    var body: some View {
        Map(coordinateRegion: $region, annotationItems: [AnnotationItem.example]) { item in
            MapAnnotation(coordinate: item.coordinate) {
                Circle()
                    .fill(Color.red)
                    .frame(width: 20, height: 20)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct AnnotationItem: Identifiable {
    let id = UUID()
    let coordinate: CLLocationCoordinate2D
}

extension AnnotationItem {
    static var example = AnnotationItem(coordinate: CLLocationCoordinate2D(latitude: 37.7769, longitude: -122.4194))
}

Annotation을 약간 위로 표시하도록 했습니다.

코드에서는 빨간색 원형 마커를 표시합니다. 원한다면 어떤 형태든 변경해서 표시할 수 있습니다.