SwiftUI Google Map项目：如何在Marker的didTap事件中展示Modal？

你现在的核心问题是：ContentView里控制Modal显示的showModal状态，没办法被MapView的Coordinator访问到，所以点击Marker时没法触发底部弹窗。我们可以通过**绑定（Binding）**来把父视图的状态传递给子视图，让Coordinator能修改这个状态来唤起Modal。

下面是具体的修改步骤：

1. 给MapView添加绑定属性 #

在MapView结构体里新增一个@Binding属性，用来接收来自ContentView的showModal状态：

struct MapView: UIViewRepresentable { 
    @ObservedObject var locationManager = LocationManager() 
    // 添加这行绑定属性，用来接收父视图的Modal状态
    @Binding var showModal: Bool
    
    // ... 其余原有代码保持不变
}

2. 修改Coordinator的didTap方法 #

在Coordinator的点击回调里，修改绑定的showModal值为true，这样就能触发ContentView里的sheet弹窗：

final class Coordinator: NSObject, GMSMapViewDelegate { 
    var control: MapView 
    init(_ control: MapView) { 
        self.control = control 
    } 
    func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool { 
        print("You tapped") 
        // 修改绑定状态，触发Modal展示
        control.showModal = true
        return false 
    } 
}

3. 更新ContentView里的MapView调用 #

把ContentView里的showModal绑定传递给MapView：

struct ContentView: View { 
    @State var showModal = false 
    var body: some View { 
        NavigationView { 
            // 将showModal的绑定传递给MapView
            MapView(showModal: $showModal) 
                .navigationBarTitle(Text("Harita")) 
        } 
        .sheet(isPresented: $showModal) { 
            DetailView() 
        } 
    } 
}

可选优化：传递Marker详情到DetailView #

如果想让底部弹窗展示点击的Marker具体信息（比如标题、坐标），可以再添加一个绑定属性来存储选中的Marker：

第一步：给MapView新增选中Marker的绑定 #

struct MapView: UIViewRepresentable { 
    @ObservedObject var locationManager = LocationManager() 
    @Binding var showModal: Bool
    // 新增绑定，用来存储选中的Marker
    @Binding var selectedMarker: GMSMarker?
    
    // ... 其余代码不变
    
    func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool { 
        print("You tapped") 
        // 存储选中的Marker，再触发Modal
        selectedMarker = marker
        showModal = true
        return false 
    }
}

第二步：更新ContentView传递选中Marker #

struct ContentView: View { 
    @State var showModal = false 
    // 新增状态存储选中的Marker
    @State var selectedMarker: GMSMarker?
    
    var body: some View { 
        NavigationView { 
            MapView(showModal: $showModal, selectedMarker: $selectedMarker) 
                .navigationBarTitle(Text("Harita")) 
        } 
        .sheet(isPresented: $showModal) { 
            // 将选中的Marker传递给DetailView
            DetailView(marker: selectedMarker) 
        } 
    } 
}

第三步：修改DetailView接收并展示Marker信息 #

struct DetailView: View { 
    @Environment(\.presentationMode) var presentationMode
    // 接收传递过来的Marker
    var marker: GMSMarker?
    
    var body: some View { 
        VStack { 
            Text(marker?.title ?? "无标题")
                .font(.title)
                .padding()
            Text(marker?.snippet ?? "无描述")
                .padding()
            Text("坐标：\(marker?.position.latitude ?? 0), \(marker?.position.longitude ?? 0)")
                .padding()
            Button("关闭") { 
                self.presentationMode.wrappedValue.dismiss() 
            } 
        } 
        .padding()
    } 
}

这样点击不同的Marker，底部弹窗就能显示对应的详情内容了。

内容的提问来源于stack exchange，提问作者Halil ibrahim yüce