実現したいこと
swift初学者です.swiftUIでmapアプリケーションの作成を通して勉強しています.
map上に拡大、縮小ボタンを配置してmapの拡大、縮小の操作をしたいのですが、実現可能なのでしょうか?
可能であるのであれば必要な知識を教えていただけたら幸いです.
実現できていること
・画面上の意図するところにボタンを設置
・ボタンを押した時にテキストを変更する
・画面上にマップを表示
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答1件
0
ベストアンサー
MapViewの latitudeDelta
と longitudeDelta
の値をバインドさせて
それぞれのボタンアクションで値を変更することで実現できそうです。
swift:ContentView.swift
1import SwiftUI 2 3struct ContentView: View { 4 // 初期のlatitudeDelta,longitudeDeltaの値 5 @State private var zoomValue = 0.01 6 7 var body: some View { 8 ScrollView { 9 VStack(alignment: .leading) { 10 // ZStackを使ってMapの上にボタンたちをのせる 11 // ボタンを右下に配置するために bottomTrailing 12 ZStack(alignment: .bottomTrailing) { 13 // MapViewはMKMapViewを使う 14 MapView(zoomValue: $zoomValue) 15 .frame(height: 300.0) 16 // ここは別クラスに分けた方が良い 17 VStack { 18 // マップ拡大ボタン 19 Button(action: { 20 // latitudeDelta,longitudeDeltaの値を変化させる 21 // @Bindingを使っているのでMapViewの方で変化を受け取れる 22 self.zoomValue *= 0.5 23 }) { 24 // 省略 25 } 26 // マップ縮小ボタン 27 Button(action: { 28 // latitudeDelta,longitudeDeltaの値を変化させる 29 // @Bindingを使っているのでMapViewの方で変化を受け取れる 30 self.zoomValue *= 2 31 }) { 32 //省略 33 } 34 } 35 .padding(.bottom, 24.0) 36 .padding(.trailing, 12.0) 37 } 38 Spacer() 39 } 40 }.edgesIgnoringSafeArea(.top) 41 } 42} 43
swift:MapView.swift
1import SwiftUI 2import MapKit // これをimport 3 4struct MapView: UIViewRepresentable { 5 6 // 親のビューからlatitudeDelta,longitudeDelta用の値と変化を受け取る 7 @Binding var zoomValue: CLLocationDegrees 8 9 func makeUIView(context: Context) -> MKMapView { 10 let mapView = MKMapView(frame: .zero) 11 return mapView 12 } 13 14 // マップ更新時に呼ばれる(拡大・縮小ボタンタップの際も呼ばれます) 15 func updateUIView(_ uiView: MKMapView, context: UIViewRepresentableContext<MapView>) { 16 let lat = 37.335020000 17 let lon = -122.009250000 18 let center = CLLocationCoordinate2DMake(lat, lon) 19 // zoomValueの値が変わるとここも更新される 20 let span = MKCoordinateSpan(latitudeDelta: zoomValue, longitudeDelta: zoomValue) 21 let region = MKCoordinateRegion(center: center, span: span) 22 uiView.setRegion(region, animated: true) 23 uiView.showsUserLocation = true 24 uiView.userTrackingMode = .follow 25 } 26}
サンプル書いてみたので参考になれば幸いです。
https://github.com/MilanistaDev/MapSampleForSwiftUI/
投稿2020/05/06 10:52
総合スコア1361
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/07 17:22
2020/05/07 18:58