如何利用今年新发布的MapKit特性实现Annotation与Marker的拖拽？

核心思路 #

iOS 17的MapKit新增了.annotationDrag交互模式，配合自定义MKAnnotation子类实现拖拽能力，同时可以结合SwiftUI的Marker作为标注视图。

步骤1：创建可拖拽的Annotation类 #

需要自定义MKAnnotation子类，开启拖拽权限并处理坐标更新：

import MapKit

class DraggableAnnotation: NSObject, MKAnnotation {
    var coordinate: CLLocationCoordinate2D
    var title: String?
    
    init(coordinate: CLLocationCoordinate2D, title: String?) {
        self.coordinate = coordinate
        self.title = title
        super.init()
    }
    
    // 允许标注被拖拽
    var isDraggable: Bool { true }
    
    // 符合KVO要求的坐标更新方法
    func updateCoordinate(to newCoordinate: CLLocationCoordinate2D) {
        willChangeValue(forKey: "coordinate")
        coordinate = newCoordinate
        didChangeValue(forKey: "coordinate")
    }
}

// 为DraggableAnnotation添加Identifiable协议支持ForEach遍历
extension DraggableAnnotation: Identifiable {
    var id: String { title ?? UUID().uuidString }
}

步骤2：在SwiftUI Map中实现拖拽 #

利用iOS 17新增API开启拖拽交互，通过Annotation包装Marker并绑定坐标：

import MapKit
import SwiftUI

struct DraggableMapView: View {
    @State private var position: MapCameraPosition = .automatic
    @State private var annotations: [DraggableAnnotation] = [
        DraggableAnnotation(
            coordinate: CLLocationCoordinate2D(latitude: 48.186915, longitude: 11.164182),
            title: "name"
        )
    ]
    
    var body: some View {
        Map(position: $position) {
            ForEach(annotations) { annotation in
                // 使用Annotation绑定自定义标注，内部嵌入Marker作为显示视图
                Annotation(annotation.title ?? "", coordinate: annotation.coordinate) {
                    Marker(annotation.title ?? "", coordinate: annotation.coordinate)
                }
                // 为当前标注开启拖拽能力
                .annotationInteraction(.draggable)
                // 监听坐标变化，同步更新数据源
                .onCoordinateChange(for: annotation) { newCoordinate in
                    annotation.updateCoordinate(to: newCoordinate)
                }
            }
        }
        // 开启Map视图的标注拖拽全局交互模式
        .interactionModes(.annotationDrag)
        .mapControls {
            MapUserLocationButton()
            MapCompass()
            MapScaleView()
        }
    }
}

关键说明 #

• .annotationInteraction(.draggable)：iOS 17新增API，单独为每个标注开启拖拽权限。
• .interactionModes(.annotationDrag)：开启Map视图的全局拖拽交互支持，确保拖拽手势被识别。
• onCoordinateChange：监听标注拖拽后的坐标变化，实时更新数据源，避免拖拽后坐标重置。
• 直接使用Marker无法开启拖拽，必须通过Annotation包装后配置拖拽属性。

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