如何在SwiftUI中为MapKit折线添加点击手势

SwiftUI原生的Map组件目前确实没有直接提供折线（Polyline）的点击交互支持，用标注绑定的方式确实不够直观，这里给你一套基于UIViewRepresentable封装MKMapView的可行方案：

步骤1：封装支持折线点击的MKMapView #

通过UIViewRepresentable把UIKit的MKMapView包装成SwiftUI可用的组件，同时实现代理方法监听折线点击：

import SwiftUI
import MapKit

struct MapWithPolylineTap: UIViewRepresentable {
    // 传入折线数据
    let polylines: [MKPolyline]
    // 点击折线的回调
    var onPolylineTap: (MKPolyline) -> Void
    
    func makeUIView(context: Context) -> MKMapView {
        let mapView = MKMapView()
        mapView.delegate = context.coordinator
        // 添加所有折线到地图
        polylines.forEach { mapView.addOverlay($0) }
        return mapView
    }
    
    func updateUIView(_ uiView: MKMapView, context: Context) {
        // 更新折线（支持动态更新轨迹）
        uiView.removeOverlays(uiView.overlays)
        polylines.forEach { uiView.addOverlay($0) }
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, MKMapViewDelegate {
        var parent: MapWithPolylineTap
        
        init(_ parent: MapWithPolylineTap) {
            self.parent = parent
        }
        
        // 监听overlay选中事件，判断是否为折线
        func mapView(_ mapView: MKMapView, didSelect overlay: MKOverlay) {
            guard let polyline = overlay as? MKPolyline else { return }
            parent.onPolylineTap(polyline)
        }
        
        // 设置折线样式（可自定义颜色、宽度）
        func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
            guard let polyline = overlay as? MKPolyline else {
                return MKOverlayRenderer(overlay: overlay)
            }
            let renderer = MKPolylineRenderer(polyline: polyline)
            renderer.strokeColor = .systemBlue
            renderer.lineWidth = 3
            return renderer
        }
    }
}

步骤2：在SwiftUI主视图中使用并绑定详情视图 #

用状态变量控制详情视图的显示，点击折线时触发状态更新：

struct TripTrackingView: View {
    // 模拟行程轨迹折线，替换成你的真实数据
    let tripPolylines: [MKPolyline] = {
        let coordinates = [
            CLLocationCoordinate2D(latitude: 39.9042, longitude: 116.4074),
            CLLocationCoordinate2D(latitude: 39.9152, longitude: 116.4038),
            CLLocationCoordinate2D(latitude: 39.9258, longitude: 116.4107)
        ]
        return [MKPolyline(coordinates: coordinates, count: coordinates.count)]
    }()
    
    // 控制详情视图显示的状态
    @State private var selectedPolyline: MKPolyline?
    
    var body: some View {
        ZStack {
            MapWithPolylineTap(polylines: tripPolylines) { polyline in
                selectedPolyline = polyline
            }
            
            // 点击折线后弹出的详情视图
            if let polyline = selectedPolyline {
                TripDetailView(polyline: polyline)
                    .frame(width: 300, height: 200)
                    .background(Color.white)
                    .cornerRadius(12)
                    .shadow(radius: 10)
                    .onTapGesture {
                        selectedPolyline = nil
                    }
            }
        }
    }
}

// 自定义行程详情视图
struct TripDetailView: View {
    let polyline: MKPolyline
    
    var body: some View {
        VStack(spacing: 16) {
            Text("行程详情")
                .font(.title)
            Text("轨迹点数量：\(polyline.pointCount)")
            Button("关闭") {
                // 可通过绑定或环境变量控制关闭，示例中用点击背景关闭
            }
        }
        .padding()
    }
}

补充说明 #

• 该方案利用UIKit原生的MKMapViewDelegate回调，能精准捕获折线点击事件
• 可根据需求调整详情视图的展示方式，比如用sheet或fullScreenCover替代弹窗
• 支持多条折线，点击时会自动区分不同的折线实例

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