궁금한 내용을 검색해보세요!
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
서근 개발노트
티스토리에 팔로잉
SWIFTUI/WebView

SwiftUI : Map View

서근
QUOTE THE DAY

-
Written by SeogunSEOGUN

반응형

 MapView 에 대해 알아보도록 합시다.

Map View

SwiftUI의 MapView를 통해 화면에서 지도를 사용할 수 있습니다.

 

시작하려면 먼저 지도에 표시되는 좌표를 추적할 수 있는 일종의 State를 만들어야 합니다. MKCoordinateRegion 를 사용해야 하고, latitude/longitude 에 좌표를 입력해주면 원하는 위치를 MapView가 실행될 때 표시됩니다.

TIP
 
 

좌표를 찾고 싶다면 이 사이트 에서 확인 할 수 있습니다.

우선 MapKitimport 해주고 @State변수를 아래와 같이 추가해줍니다.

//서울 좌표
@State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 37.5666791, longitude: 126.9782914), span: MKCoordinateSpan(latitudeDelta: 0.5, longitudeDelta: 0.5))

그리고 Map을 호출해주겠습니다.

import SwiftUI
import MapKit

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

원하는 경우 기능을 추가할 수 있습니다.

TIP
 
 

Xcode 의 Canvas에서 확대 및 축소를 하려면 option 을 누르고 마우스로 당기면 됩니다.

확대/축소 및 이동 금지

지도에 별도의 interactionModes 매개변수를 제공하여 사용자가 지도를 제어할 수 있는 정도를 제한할 수 있습니다. 예를 들어, 지도에 고정된 지점을 표시되도록 하려면 다음을 사용합니다. (이동 및 확대 불가)

Map(coordinateRegion: $region, interactionModes: [])

확대/축소 가능 이동 금지

사용자가 확대 및 축소는 가능하지만 다른 위치로 이동은 할 수 없도록 하려면 다음을 사용합니다.

Map(coordinateRegion: $region, interactionModes: [.zoom])

확대/축소 및 이동 가능

마지막으로, 사용자가 직접 지도를 이동하고 확대 축소를 가능하게 할 수 있습니다.

별도의 showsUserLocationuserTrackingMode 매개 변수를 사용해야 합니다.

Map(coordinateRegion: $region, showsUserLocation: true, userTrackingMode: .constant(.follow))

전체 코드

더보기
import SwiftUI
import MapKit

struct ContentView: View {
    
    @State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 37.5666791, longitude: 126.9782914), span: MKCoordinateSpan(latitudeDelta: 0.5, longitudeDelta: 0.5))
    
    var body: some View {
        Map(coordinateRegion: $region, showsUserLocation: true, userTrackingMode: .constant(.follow))
            .edgesIgnoringSafeArea(.all)
    }
}

 

 

읽어주셔서 감사합니다🤟

 

참고하면 좋은 게시글👇🏻

 

SwiftUI Project6 : Use Views From Other Frameworks

#1 상세 정보 생성 //ContentView struct ContentView: View { var body: some View { VStack(alignment: .leading){ HStack { Text("경복궁") .font(.title) .padding(.bottom, 10) Text("서울") .font(.caption..

seons-dev.tistory.com

 

 

 

'SWIFTUI > WebView' 카테고리의 다른 글

SwiftUI : VideoPlayer  (2) 2021.01.31
SwiftUI : Link  (0) 2021.01.30
SwiftUI : WebView 생성(코드)  (0) 2021.01.27

잘못된 내용이 있으면 언제든 피드백 부탁드립니다.


서근


위처럼 이미지 와 함께 댓글을 작성할 수 있습니다.