SwiftUI.Map选中Annotation不可见时点击空白区域无法取消选择

问题描述 #

在SwiftUI Map中选中Annotation后，若该Annotation移出地图可视范围，点击地图空白区域无法取消选择；但Annotation在可视范围内时，此功能正常。对比系统Maps.app，无论标记是否在屏幕内均能正常取消选择。

问题原因 #

这是SwiftUI Map的默认行为限制：仅当选中的Annotation处于当前可视区域内时，地图才会响应空白区域点击来重置选中状态。当Annotation移出可视范围后，系统不会触发取消选择的逻辑。

解决方案 #

通过手动监听地图点击事件，结合底层MKMapView判断选中的Annotation是否在可视区域外，若满足条件则主动重置选中状态。

修改后代码 #

import SwiftUI
import MapKit

struct TestMarker: Identifiable {
    let id: UUID
    let coordinate: CLLocationCoordinate2D
}

struct SomeView: View {
    @State var selectionId: UUID?
    var markers: [TestMarker]
    
    // 获取当前选中的标记
    private var selectedMarker: TestMarker? {
        markers.first { $0.id == selectionId }
    }
    
    var body: some View {
        MapReader { proxy in
            Map(selection: $selectionId) {
                ForEach(markers) { marker in
                    Annotation(
                        "",
                        coordinate: marker.coordinate
                    ) {
                        Text("\(marker.id)")
                    }
                }
            }
            // 同时监听地图点击事件，不干扰原有选择逻辑
            .simultaneousGesture(TapGesture().onEnded {
                guard let selectedMarker = selectedMarker, let mapView = proxy.mapView else { return }
                
                // 将标记坐标转换为地图视图上的点
                let point = mapView.convert(selectedMarker.coordinate, toPointTo: mapView)
                // 判断点是否在地图可视范围内
                let isInVisibleRegion = mapView.bounds.contains(point)
                
                // 若标记不在可视范围，强制取消选择
                if !isInVisibleRegion {
                    selectionId = nil
                }
            })
        }
    }
}

关键说明 #

1. MapReader：用于获取底层的MKMapView实例，这是判断坐标是否在可视区域的核心依据。
2. simultaneousGesture：添加同时手势，既保留Map自身的Annotation点击选择逻辑，又能监听空白区域点击事件。
3. 可视区域判断：通过convert(_:toPointTo:)将经纬度转换为地图视图上的坐标点，再判断该点是否在视图 bounds 内，精准确认标记是否在可视范围外。

内容的提问来源于stack exchange，提问作者RandomUsername