地图中注释圈的叠加 - SwiftUI

我想添加一个具有一定半径的圆Map with SwiftUI仅有的。我希望能够在Map例如1公里。这是我想要实现的图片：

下面代码的问题是圆圈在地图上有固定的大小：

import SwiftUI
import MapKit

struct ContentView: View {
    static let usersLocation = CLLocationCoordinate2D(latitude: 52.0929779694589, longitude: 5.084964426384347)

    @State private var region = MKCoordinateRegion(
        center: ContentView.usersLocation,
        span: MKCoordinateSpan(latitudeDelta: 0.01, longitudeDelta: 0.01)
    )
    let annotations = [CurrentUsersAnnotation()]

    
    var body: some View {
        Map(
            coordinateRegion: $region, annotationItems: annotations) { _ in
                MapAnnotation(coordinate: ContentView.usersLocation) {
                    Circle()
                            .strokeBorder(Color.red, lineWidth: 4)
                            .frame(width: 40, height: 40)
                }
            }
    }
}

struct CurrentUsersAnnotation: Identifiable {
    let id = UUID() // Always unique on map
}

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

有仅 SwiftUI 的修复吗？我不是在寻找 UIKit 答案，我想在 SwiftUI 中完全做到这一点。

不支持叠加，但您可以轻松调整大小View/Circle通过计算之间的比率View和span

首先，由于您需要公里，因此您可以计算该区域的上边缘和下边缘（纬度跨度）之间的距离。

extension MKCoordinateRegion{
    ///Identify the length of the span in meters north to south
    var spanLatitude: Measurement<UnitLength>{
        let loc1 = CLLocation(latitude: center.latitude - span.latitudeDelta * 0.5, longitude: center.longitude)
        let loc2 = CLLocation(latitude: center.latitude + span.latitudeDelta * 0.5, longitude: center.longitude)
        let metersInLatitude = loc1.distance(from: loc2)
        return Measurement(value: metersInLatitude, unit: UnitLength.meters)
    }
}

using GeometryReader你可以得到height of the View/Map，然后是比率。一旦你知道了每米的大小，只需乘以千米即可。

//Size per meter
let ratio = (geo.size.height/region.spanLatitude.value)
//Size per kilometer
let kilometerSize = ratio * 1000

然后使用kilometerSize in the frame.

考虑到两者之间可能存在不一致，这可能不是完美的公里数View和Map但可能非常接近。如果您能找到已知公里数的东西，您可以对其进行测试。

struct ScaledAnnotationView: View {
    static let usersLocation = CLLocationCoordinate2D(latitude: 52.0929779694589, longitude: 5.084964426384347)
    
    @State private var region = MKCoordinateRegion(
        center: ScaledAnnotationView.usersLocation,latitudinalMeters: 1000, longitudinalMeters: 1000
    )
    let annotations = [CurrentUsersAnnotation()]
    
    
    var body: some View {
        //Get the size of the frame for scale
        GeometryReader{ geo in
            Map(
                coordinateRegion: $region, annotationItems: annotations) { _ in
                    MapAnnotation(coordinate: ScaledAnnotationView.usersLocation) {
                            //Size per kilometer or any unit, just change the converted unit.
                            let kilometerSize = (geo.size.height/region.spanLatitude.converted(to: .kilometers).value)
                        Circle()
                            .fill(Color.red.opacity(0.5))
                        //Keep it a circle
                            .frame(width: kilometerSize, height: kilometerSize)
                    }
                }
        }
    }
}

这是谷歌地图距离测量，用于确认测量