如何将按钮/视图放在SwiftUI地图的顶部？

Question

我找不到一种方法将我的buttonView (只是一个按钮)放在地图的顶部，这样我就可以点击它。在另一个更复杂的设置中，按钮以某种方式出现在顶部，我可以点击它，但这是幸运的，而不是故意的。如何让我的buttonView出现在地图上，这样我就可以点击它了？

注意，我认为问题可能是我的buttonView“在”某个地图图层下，因此地图捕获了点击事件，而不是将它们传递给我的buttonView。

Xcode 12 beta-3，mac catalina，目标ios 14。

import Foundation
import SwiftUI
import MapKit
import CoreLocation
@main
 struct TestMapApp: App {
    var body: some Scene {
            WindowGroup {
                    MapViewer()
            }
    }
}
struct MapViewer: View {
    @State var cityAnno = [CityMapLocation(title: "Tokyo", subtitle: "Japan", lat: 35.685, lon: 139.7514)]
    @State var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 35.685, longitude: 139.7514),span: MKCoordinateSpan(latitudeDelta: 1.0, longitudeDelta: 1.0))
    
    var body: some View {
            Map(coordinateRegion: $region, annotationItems: cityAnno) { city in
                    MapAnnotation(coordinate: city.coordinate) {
                            buttonView(cityName: city.title!)
                            // tried this, does not work
                            // Image(systemName:"dot.circle.and.cursorarrow").foregroundColor(.white).scaleEffect(2.2)
                            //   .onTapGesture { print("----> onTapGesture") }
                    }
            }
    }
    func buttonView(cityName: String) -> some View {
            Button(action: {print("----> buttonView action")}) {
                    VStack {
                            Text(cityName)
                            Image(systemName: "dot.circle.and.cursorarrow")
                    }.foregroundColor(.red).scaleEffect(1.2)
            }.frame(width: 111, height: 111)
            // tried combinations of these, without success
//              .background(Color.gray).opacity(0.8)
//              .border(Color.white)
//              .contentShape(Rectangle())
//              .clipShape(Rectangle())
//              .zIndex(1)
//              .buttonStyle(PlainButtonStyle())
//              .layoutPriority(1)
//              .allowsHitTesting(true)
//              .onTapGesture {
//                      print("----> onTapGesture")
//              }
    }
    }
    class CityMapLocation: NSObject, MKAnnotation, Identifiable {
    var id = UUID().uuidString
    var title: String?
    var subtitle: String?
    dynamic var coordinate: CLLocationCoordinate2D
    
     init(title: String?, subtitle: String?, lat: Double, lon: Double) {
            self.id = UUID().uuidString
            self.title = title
            self.subtitle = subtitle
            self.coordinate = CLLocationCoordinate2D(latitude: lat, longitude: lon)
    }
    }

Answer 1

只需将它们包装在ZStack中：

ZStack {
    Map(coordinateRegion: $region, annotationItems: cityAnno){...}
    Button(action: {print("----> buttonView action")}) {...}
}

Answer 2

你可以只在Vstack上获得onTapGesture。通过替换MapViewer的主体来尝试下面的代码。

var body: some View {
    Map(coordinateRegion: $region, annotationItems: cityAnno) { city in
        MapAnnotation(coordinate: city.coordinate) {
            VStack {
                Text(city.title ?? "")
                Image(systemName: "dot.circle.and.cursorarrow")
            }
            .foregroundColor(.red).scaleEffect(1.2)
            .frame(width: 111, height: 111)
            .onTapGesture {
                print("Clicked")
            }
        }
    }
}