iOS Mapbox拖拽标注时更新地图导致标注回退至原始坐标问题

嘿，我刚好碰到过类似的坑！你遇到的标注来回跳的核心原因是：当你调用mapView.setCenter()时，Mapbox会自动根据标注的原始坐标重新计算标注视图的位置，但此时拖拽中的标注视图坐标还没同步到对应的MGLAnnotation对象上，就导致了“拉扯式”的跳动现象。

下面是修复后的完整代码，核心改动是在拖拽过程中实时更新标注的坐标，同时调整地图平移逻辑，让地图跟着拖拽手势平滑移动，而不是直接把地图中心硬设为标注位置：

import Mapbox

class ViewController: UIViewController, MGLMapViewDelegate {
    var mapView: MGLMapView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        mapView = MGLMapView(frame: view.bounds)
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        mapView.styleURL = MGLStyle.streetsStyleURL
        mapView.tintColor = .darkGray
        mapView.zoomLevel = 1
        mapView.delegate = self
        view.addSubview(mapView)
        
        // 标注坐标集合
        let coordinates = [
            CLLocationCoordinate2D(latitude: 0, longitude: -70),
            CLLocationCoordinate2D(latitude: 0, longitude: -35),
            CLLocationCoordinate2D(latitude: 0, longitude: 0),
            CLLocationCoordinate2D(latitude: 0, longitude: 35),
            CLLocationCoordinate2D(latitude: 0, longitude: 70)
        ]
        
        var pointAnnotations = [MGLPointAnnotation]()
        for coordinate in coordinates {
            let point = MGLPointAnnotation()
            point.coordinate = coordinate
            point.title = "To drag this annotation, first tap and hold."
            pointAnnotations.append(point)
        }
        mapView.addAnnotations(pointAnnotations)
    }
    
    func mapView(_ mapView: MGLMapView, viewFor annotation: MGLAnnotation) -> MGLAnnotationView? {
        guard annotation is MGLPointAnnotation else { return nil }
        
        if let annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: "draggablePoint") {
            return annotationView
        } else {
            let dav = DraggableAnnotationView(reuseIdentifier: "draggablePoint", size: 50)
            dav.mapView = mapView
            return dav
        }
    }
    
    func mapView(_ mapView: MGLMapView, annotationCanShowCallout annotation: MGLAnnotation) -> Bool {
        return true
    }
}

class DraggableAnnotationView: MGLAnnotationView {
    weak var mapView: MGLMapView!
    // 定义触发地图平移的边缘安全距离
    private let edgeInset: CGFloat = 40
    private var lastDragLocation: CGPoint?
    
    init(reuseIdentifier: String, size: CGFloat) {
        super.init(reuseIdentifier: reuseIdentifier)
        
        isDraggable = true
        scalesWithViewingDistance = false
        
        frame = CGRect(x: 0, y: 0, width: size, height: size)
        backgroundColor = .darkGray
        
        layer.cornerRadius = size / 2
        layer.borderWidth = 1
        layer.borderColor = UIColor.white.cgColor
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOpacity = 0.1
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func setDragState(_ dragState: MGLAnnotationViewDragState, animated: Bool) {
        super.setDragState(dragState, animated: animated)
        
        switch dragState {
        case .starting:
            print("Starting", terminator: "")
            startDragging()
            lastDragLocation = center
        case .dragging:
            print(".", terminator: "")
            handleDragging()
        case .ending, .canceling:
            print("Ending")
            endDragging()
            // 拖拽结束后最终确认标注坐标
            if let annotation = annotation as? MGLPointAnnotation {
                annotation.coordinate = mapView.convert(center, toCoordinateFrom: self)
            }
        case .none:
            break
        @unknown default:
            fatalError("Unknown drag state")
        }
    }
    
    private func handleDragging() {
        guard let mapView = mapView, let annotation = annotation as? MGLPointAnnotation else { return }
        
        // 1. 获取当前拖拽的屏幕位置
        let currentScreenPoint = center
        // 2. 实时将屏幕位置转换为地图坐标，同步到标注对象
        let newCoordinate = mapView.convert(currentScreenPoint, toCoordinateFrom: self)
        annotation.coordinate = newCoordinate
        
        // 3. 检查是否拖拽到屏幕边缘，触发地图平移
        let mapFrame = mapView.frame
        let shouldPanMap = currentScreenPoint.x < edgeInset ||
                          currentScreenPoint.x > mapFrame.width - edgeInset ||
                          currentScreenPoint.y < edgeInset ||
                          currentScreenPoint.y > mapFrame.height - edgeInset
        
        if shouldPanMap {
            // 计算拖拽偏移量，让地图反向平滑平移
            guard let lastLocation = lastDragLocation else { return }
            let deltaX = currentScreenPoint.x - lastLocation.x
            let deltaY = currentScreenPoint.y - lastLocation.y
            
            // 将屏幕偏移转换为地图坐标偏移
            let newMapCenter = mapView.convert(
                CGPoint(x: mapFrame.midX - deltaX, y: mapFrame.midY - deltaY),
                toCoordinateFrom: mapView
            )
            
            // 禁用动画避免和拖拽手势冲突，保持平移流畅
            mapView.setCenter(newMapCenter, animated: false)
            
            // 让标注视图保持在屏幕中间位置，避免跟随地图移动
            center = CGPoint(x: mapFrame.midX, y: mapFrame.midY)
        }
        
        lastDragLocation = currentScreenPoint
    }
    
    func startDragging() {
        UIView.animate(withDuration: 0.3, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: [], animations: {
            self.layer.opacity = 0.8
            self.transform = CGAffineTransform.identity.scaledBy(x: 1.5, y: 1.5)
        }, completion: nil)
        
        if #available(iOS 10.0, *) {
            let hapticFeedback = UIImpactFeedbackGenerator(style: .light)
            hapticFeedback.impactOccurred()
        }
    }
    
    func endDragging() {
        transform = CGAffineTransform.identity.scaledBy(x: 1.5, y: 1.5)
        UIView.animate(withDuration: 0.3, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: [], animations: {
            self.layer.opacity = 1
            self.transform = CGAffineTransform.identity.scaledBy(x: 1, y: 1)
        }, completion: nil)
        
        if #available(iOS 10.0, *) {
            let hapticFeedback = UIImpactFeedbackGenerator(style: .light)
            hapticFeedback.impactOccurred()
        }
    }
}

核心改动说明： #

• 实时同步标注坐标：拖拽过程中把标注视图的屏幕坐标实时转成地图坐标，直接更新annotation.coordinate，让Mapbox始终用最新坐标计算视图位置，避免原始坐标的拉扯。
• 平滑地图平移逻辑：不再硬设地图中心为标注位置，而是根据拖拽偏移量反向平移地图，同时让标注视图保持在屏幕相对位置，彻底解决跳动问题。
• 优化边缘触发机制：用edgeInset定义触发平移的安全区域，只有拖拽到屏幕边缘时才移动地图，交互体验更自然。

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