SwiftUI中无法获取Map滚动结束事件，需优化区域过滤逻辑

问题背景 #

SwiftUI原生Map组件没有提供地图滚动结束的回调事件，直接在.onChange(of: region)里执行2000条数据的筛选逻辑会导致滚动时频繁触发计算，造成界面卡顿；尝试添加DragGesture也无效，因为地图内部的手势会拦截外部手势。

解决方案：用UIKit的MKMapView包装实现监听 #

通过将UIKit的MKMapView包装成UIViewRepresentable，利用其代理方法mapView(_:regionDidChangeAnimated:)来判断滚动是否结束，再执行筛选操作。

1. 封装MKMapView到SwiftUI #

import SwiftUI
import MapKit

struct MapViewWrapper: UIViewRepresentable {
    @Binding var region: MKCoordinateRegion
    var annotations: [MKAnnotation]
    var onRegionChangeEnded: (MKCoordinateRegion) -> Void
    
    func makeUIView(context: Context) -> MKMapView {
        let mapView = MKMapView()
        mapView.delegate = context.coordinator
        mapView.region = region
        mapView.addAnnotations(annotations)
        return mapView
    }
    
    func updateUIView(_ uiView: MKMapView, context: Context) {
        // 仅当区域手动修改时更新，避免循环触发
        if uiView.region != region {
            uiView.setRegion(region, animated: true)
        }
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, MKMapViewDelegate {
        var parent: MapViewWrapper
        
        init(_ parent: MapViewWrapper) {
            self.parent = parent
        }
        
        // 监听区域变化结束
        func mapView(_ mapView: MKMapView, regionDidChangeAnimated animated: Bool) {
            // 非动画状态即为滚动结束，触发回调
            if !animated {
                parent.onRegionChangeEnded(mapView.region)
            }
        }
    }
}

2. 在SwiftUI视图中使用包装组件 #

struct ContentView: View {
    @StateObject var viewModel = MapViewModel()
    
    var body: some View {
        MapViewWrapper(
            region: $viewModel.region,
            annotations: viewModel.filteredAnnotations,
            onRegionChangeEnded: { region in
                // 滚动结束后执行筛选
                viewModel.filterAnnotations(for: region)
            }
        )
    }
}

3. ViewModel中处理筛选逻辑（后台执行避免卡顿） #

class MapViewModel: ObservableObject {
    @Published var region: MKCoordinateRegion = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 37.3349, longitude: -122.0090), span: MKCoordinateSpan(latitudeDelta: 0.1, longitudeDelta: 0.1))
    @Published var allAnnotations: [MKPointAnnotation] = [] // 2000条原始数据
    @Published var filteredAnnotations: [MKPointAnnotation] = []
    
    init() {
        // 模拟初始化2000条标注数据
        for _ in 0..<2000 {
            let annotation = MKPointAnnotation()
            annotation.coordinate = CLLocationCoordinate2D(
                latitude: 37.3349 + Double.random(in: -0.5...0.5),
                longitude: -122.0090 + Double.random(in: -0.5...0.5)
            )
            allAnnotations.append(annotation)
        }
        // 初始筛选
        filterAnnotations(for: region)
    }
    
    func filterAnnotations(for region: MKCoordinateRegion) {
        // 后台线程执行筛选，避免阻塞主队列
        DispatchQueue.global(qos: .userInitiated).async {
            let filtered = self.allAnnotations.filter { annotation in
                region.contains(annotation.coordinate)
            }
            // 取前150条
            let limited = Array(filtered.prefix(150))
            
            DispatchQueue.main.async {
                self.filteredAnnotations = limited
            }
        }
    }
}

// 扩展MKCoordinateRegion判断坐标是否在区域内
extension MKCoordinateRegion {
    func contains(_ coordinate: CLLocationCoordinate2D) -> Bool {
        let topLeft = CLLocationCoordinate2D(latitude: center.latitude + span.latitudeDelta/2, longitude: center.longitude - span.longitudeDelta/2)
        let bottomRight = CLLocationCoordinate2D(latitude: center.latitude - span.latitudeDelta/2, longitude: center.longitude + span.longitudeDelta/2)
        
        return coordinate.latitude <= topLeft.latitude &&
               coordinate.latitude >= bottomRight.latitude &&
               coordinate.longitude >= topLeft.longitude &&
               coordinate.longitude <= bottomRight.longitude
    }
}

关键说明 #

• UIKit的MKMapView代理方法regionDidChangeAnimated会在区域变化完成后触发，通过animated参数可以区分滚动过程和滚动结束状态。
• 筛选逻辑放在后台线程执行，避免主队列卡顿，完成后切回主线程更新UI。
• 包装组件中添加了区域更新判断，防止循环触发代理回调。

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