SwiftUI 地图顶部的半透明圆圈

问题描述

我正在 SwiftUI 中构建应用程序，但确实遇到了一些不便。我正在使用 MapKit 创建一个地图，其中某些位置在它们上面有一个图钉。我创建了一个滑块来缩放到特定半径内的区域。然而，对于用户来说，看到一个半透明的圆圈会很方便，该圆圈表示在给定半径内的位置。我已经尝试了以下

Circle()
.fill(Color.blue)
.frame(width: geo.size.width,height: geo.size.height)
.opacity(0.15)
.allowsHitTesting(false)

，但是在我添加了 .allowsHitTesting(false) 之后，我仍然无法点击引脚。当我摆脱圈子时，它再次起作用。也许我遗漏了一些东西，或者这个问题有另一个解决方案。

这是我的全文，以获取额外的上下文：

GeometryReader{ geo in
            ZStack{
                Map(coordinateRegion: $region,interactionModes: [],showsUserLocation: true,annotationItems: GPsNear,annotationContent: { pin in
                    MapAnnotation(coordinate: pin.coordinate,content: {
                                    PinButtonView(pin: pin)
                                  })
                })
                .edgesIgnoringSafeArea(.all)
                .onAppear(perform: askForPermission)
                
//                Circle()
//                    .fill(Color.blue)
//                    .frame(width: geo.size.width,height: geo.size.height)
//                    .opacity(0.15)
//                    .allowsHitTesting(false)
                
                vstack{
                    Slider(
                        value: Binding(get: {
                            self.regionSpan * 100
                        },set: { (newVal) in
                            self.regionSpan = (newVal / 100)
                            self.sliderChanged()
                        }),in: 0.9...45.045,step: 1,onEditingChanged: { editing in
                            isEditing = editing
                        },minimumValueLabel: Text("1"),maximumValueLabel: Text("25 km")
                    ) {
                        Text("Radius")
                    }.padding()
                    Spacer()
                }
            }
        }

还有 PinButtonView：

Button(action: {
            showingDetailScreen.toggle()
        }) {
            Image(systemName: "mappin")
                .padding()
                .foregroundColor(.red)
                .font(.title)
        }
        .actionSheet(isPresented: $showingDetailScreen){
            ActionSheet(title: Text(pin.name),buttons: [
                .default(Text("Call practitioner")) {
                    callNumber()
                },.default(Text("Visit website")) { visitSite() },.cancel()
            ])
        }

有没有人对此有解决方案，我期待看到任何答案。

解决方法

您需要将 .overlay 与 .allowsHitTesting(false) 一起使用。

ZStack{
Map(coordinateRegion: $region,interactionModes: [],showsUserLocation: true,annotationItems: GPsNear,annotationContent: { pin in
    MapAnnotation(coordinate: pin.coordinate,content: {
                    PinButtonView(pin: pin)
                  })
})
.edgesIgnoringSafeArea(.all)
.onAppear(perform: askForPermission)
.overlay(
    Circle()
        .fill(Color.blue)
        .frame(width: geo.size.width,height: geo.size.height)
        .opacity(0.15)
)
.allowsHitTesting(false)

VStack{
 //// Rest of the code