swiftUIのボタンでマップの操作をしたい

Question

実現したいこと

swift初学者です．swiftUIでmapアプリケーションの作成を通して勉強しています．
map上に拡大、縮小ボタンを配置してmapの拡大、縮小の操作をしたいのですが、実現可能なのでしょうか？
可能であるのであれば必要な知識を教えていただけたら幸いです．

実現できていること

・画面上の意図するところにボタンを設置
・ボタンを押した時にテキストを変更する
・画面上にマップを表示

Answer 1

MapViewの latitudeDelta と longitudeDelta の値をバインドさせて
それぞれのボタンアクションで値を変更することで実現できそうです。

import SwiftUI

struct ContentView: View {
    // 初期のlatitudeDelta，longitudeDeltaの値
    @State private var zoomValue = 0.01

    var body: some View {
        ScrollView {
            VStack(alignment: .leading) {
                // ZStackを使ってMapの上にボタンたちをのせる
                // ボタンを右下に配置するために bottomTrailing
                ZStack(alignment: .bottomTrailing) {
                    // MapViewはMKMapViewを使う
                    MapView(zoomValue: $zoomValue)
                        .frame(height: 300.0)
                    // ここは別クラスに分けた方が良い
                    VStack {
                        // マップ拡大ボタン
                        Button(action: {
                            // latitudeDelta，longitudeDeltaの値を変化させる
                            // @Bindingを使っているのでMapViewの方で変化を受け取れる
                            self.zoomValue *= 0.5
                        }) {
                            // 省略
                        }
                        // マップ縮小ボタン
                        Button(action: {
                            // latitudeDelta，longitudeDeltaの値を変化させる
                            // @Bindingを使っているのでMapViewの方で変化を受け取れる
                            self.zoomValue *= 2
                        }) {
                            //省略
                        }
                    }
                    .padding(.bottom, 24.0)
                    .padding(.trailing, 12.0)
                }
                Spacer()
            }
        }.edgesIgnoringSafeArea(.top)
    }
}

import SwiftUI
import MapKit   // これをimport

struct MapView: UIViewRepresentable {

    // 親のビューからlatitudeDelta，longitudeDelta用の値と変化を受け取る
    @Binding var zoomValue: CLLocationDegrees

    func makeUIView(context: Context) -> MKMapView {
        let mapView = MKMapView(frame: .zero)
        return mapView
    }

    // マップ更新時に呼ばれる(拡大・縮小ボタンタップの際も呼ばれます)
    func updateUIView(_ uiView: MKMapView, context: UIViewRepresentableContext<MapView>) {
        let lat = 37.335020000
        let lon = -122.009250000
        let center = CLLocationCoordinate2DMake(lat, lon)
        // zoomValueの値が変わるとここも更新される
        let span = MKCoordinateSpan(latitudeDelta: zoomValue, longitudeDelta: zoomValue)
        let region = MKCoordinateRegion(center: center, span: span)
        uiView.setRegion(region, animated: true)
        uiView.showsUserLocation = true
        uiView.userTrackingMode = .follow
    }
}

サンプル書いてみたので参考になれば幸いです。
https://github.com/MilanistaDev/MapSampleForSwiftUI/

Comments

[watsa]

コメントアウトとともにコードを載せていただきありがとうございます．とてもわかりやすかったです．
おかげでボタンでマップの拡大，縮小の実装ができました．

[TakuyaAso]

よかったです！私も勉強になりました。ありがとうございます！