SwiftUIで、Map()使用して地図を表示中に中心の緯度経度を取得したい。

Question

実現したいこと

SwiftUIでMapを表示させ、現在地の緯度経度を表示させるところまでは、以下のコードで実現できました。この地図は指でドラッグやピンチ、ひねりで表示エリアや方向を変えられます。

import SwiftUI
import MapKit
import CoreLocation

class LocationManager: NSObject, ObservableObject, CLLocationManagerDelegate {
    private let locationManager = CLLocationManager()
    
    @Published var lastKnownLocation: CLLocationCoordinate2D?
    
    override init() {
        super.init()
        locationManager.delegate = self
        locationManager.desiredAccuracy = kCLLocationAccuracyBest
        locationManager.requestWhenInUseAuthorization()
    }
    
    func requestLocation() {
        locationManager.requestLocation()
    }
    
    func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
        if let location = locations.last {
            DispatchQueue.main.async {
                self.lastKnownLocation = location.coordinate
            }
        }
    }
    
    func locationManager(_ manager: CLLocationManager, didFailWithError error: Error) {
        print("Failed to get user location: \(error.localizedDescription)")
    }
}

struct ForTeratail: View {
    @State private var coordinate: CLLocationCoordinate2D = .init(latitude: 0.00, longitude: 0.00)
    @State private var userCameraPosition: MapCameraPosition = .userLocation(followsHeading: true, fallback: .camera(MapCamera(centerCoordinate: .myHome, distance: 5000, pitch: 60)))
    
    @ObservedObject var locationManager = LocationManager()
    
    var body: some View {
        ZStack {
            VStack {
                Spacer()
                VStack(alignment: .leading) {
                    Text("Map Center:")
                    Text("latitude: \(coordinate.latitude)")
                    Text("longitude: \(coordinate.longitude)")
                }
                .foregroundColor(.white)
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(8)
                .background(
                    RoundedRectangle(cornerRadius: 4)
                        .fill(Color.secondary)
                )
            }
            .padding()
            .zIndex(100)
            
            Map(position: $userCameraPosition) {
                UserAnnotation()
            }
            .mapControls {
                MapCompass()
                    .mapControlVisibility(.visible)
                MapPitchToggle()
                    .mapControlVisibility(.visible)
                MapScaleView()
                    .mapControlVisibility(.visible)
                MapUserLocationButton()
                    .mapControlVisibility(.visible)
            }
            .onAppear {
                locationManager.requestLocation()
            }
            .onReceive(locationManager.$lastKnownLocation) { location in
                if let location = location {
                    coordinate = location
                }
            }
        }
    }
}

#Preview {
    ForTeratail()
}

この状態で、Mapを指でドラッグしたり、ピンチしたりして地図を移動等して指を離したときに、その地図の中心地の緯度経度を取得して表示させたいです。

発生している問題・分からないこと

マップを指で操作して、指を離したときに地図の中心地を得る方法がわかりません。
Map {...} のあと、DragGestureや.onChangeなどで取得できそうなのですが、うまくできません。

該当のソースコード

上記に記入しました

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

ChatGPTで解決方法を質問しました。何度か提案が出てきましたが、いずれもエラーが出て、堂々巡りとなったため断念しました。以下のコードでは、
Value of type 'some View' has no member 'onRegionDidChange'
というエラーが出てしまいます。

import SwiftUI
import MapKit
import CoreLocation

class LocationManager: NSObject, ObservableObject, CLLocationManagerDelegate {
    private let locationManager = CLLocationManager()
    
    @Published var lastKnownLocation: CLLocationCoordinate2D?
    
    override init() {
        super.init()
        locationManager.delegate = self
        locationManager.desiredAccuracy = kCLLocationAccuracyBest
        locationManager.requestWhenInUseAuthorization()
    }
    
    func requestLocation() {
        locationManager.requestLocation()
    }
    
    func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
        if let location = locations.last {
            DispatchQueue.main.async {
                self.lastKnownLocation = location.coordinate
            }
        }
    }
    
    func locationManager(_ manager: CLLocationManager, didFailWithError error: Error) {
        print("Failed to get user location: \(error.localizedDescription)")
    }
}

struct ForTeratail: View {
    @State private var coordinate: CLLocationCoordinate2D = .init(latitude: 0.00, longitude: 0.00)
    @State private var userCameraPosition: MapCameraPosition = .userLocation(followsHeading: true, fallback: .camera(MapCamera(centerCoordinate: .myHome, distance: 5000, pitch: 60)))
    
    @ObservedObject var locationManager = LocationManager()
    
    var body: some View {
        ZStack {
            VStack {
                Spacer()
                VStack(alignment: .leading) {
                    Text("Map Center:")
                    Text("latitude: \(coordinate.latitude)")
                    Text("longitude: \(coordinate.longitude)")
                }
                .foregroundColor(.white)
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(8)
                .background(
                    RoundedRectangle(cornerRadius: 4)
                        .fill(Color.secondary)
                )
            }
            .padding()
            .zIndex(100)
            
            Map(position: $userCameraPosition) {
                UserAnnotation()
            }
            .mapControls {
                MapCompass()
                    .mapControlVisibility(.visible)
                MapPitchToggle()
                    .mapControlVisibility(.visible)
                MapScaleView()
                    .mapControlVisibility(.visible)
                MapUserLocationButton()
                    .mapControlVisibility(.visible)
            }
            .onAppear {
                locationManager.requestLocation()
            }
            .onReceive(locationManager.$lastKnownLocation) { location in
                if let location = location {
                    coordinate = location
                }
            }
            .onRegionDidChange { region in
                coordinate = region.center
            }
        }
    }
}

#Preview {
    ForTeratail()
}

補足

特になし

Answer 1

onMapCameraChange(frequency:_:) | Apple Developer Documentation

onMapCameraChangeを使用してみたらいかがでしょうか。

.onMapCameraChange { context in
    coordinate = context.camera.centerCoordinate
}

Comments

[kuwatsy]

回答ありがとうございます。
試したところ問題が解決しました！
たった３行で１週間悩んでいたことが綺麗に解決できまして、感動しております。
ChatGPTも結構よく助けてくれますが、こんなにエレガントには解決してくれません。
ベストアンサーに選ばせていただきました。