SwiftUI中地图顶部的半透明圆圈答案

【问题标题】：Semi-transparent circle on top of map in SwiftUISwiftUI中地图顶部的半透明圆圈
【发布时间】：2021-06-10 11:37:10
【问题描述】：

我正在使用 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()
            ])
        }

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

【问题讨论】：

标签： ios swiftui mapkit clickable mapkitannotation

【解决方案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

【讨论】：

当我尝试这段代码时，似乎 allowHitTesting(false) 适用于地图（我无法单击任何内容）。当我将 .allowsHitTesting(false) 移动到圆圈上时，我只能单击圆圈外的图钉。