SwiftUI 中 map 顶部的半透明圆圈

Question

我正在 SwiftUI 中构建一个应用程序，我真的遇到了一点不便。 我正在使用 MapKit 创建一个 map，其中某些位置在它们上面有一个引脚。 我创建了一个 slider 来缩放到一定半径内的区域。 然而，对于用户来说，看到一个半透明的圆圈会很方便，它表示在他们给定的半径内有什么。 我已经尝试了以下

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()
            ])
        }

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

Answer 1

您需要使用.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