在 iOS 16 及以上版本的 MKMapView 上添加移动圆圈

Question

我想在 MKMapView 上添加一个移动圆圈，它将保留在地图的中心，并在用户移动地图时开始移动，并在用户放大/缩小地图时放大和缩小我可以通过以下方式实现此目的使用地图的中心坐标，但是当我移动应用程序时，它会闪烁，因为当坐标发生变化时我正在删除和添加 MKCircle 叠加层

我想要实现的目标：-地图视图顶部的移动圆圈/注释随地图视图一起移动/缩放

这是代码

在此处添加平移手势和圆圈叠加

func makeUIView(context: Context) -> MKMapView {
        let mapView = MKMapView()
        mapView.delegate = context.coordinator
        mapView.isUserInteractionEnabled = true
        mapView.showsUserLocation = true
        mapView.showsCompass = false

let panGesture =  UIPanGestureRecognizer(target: context.coordinator, action: #selector(context.coordinator.addPinBasedOnGesture(_:)))
       panGesture.delegate = context.coordinator
      mapView.addGestureRecognizer(panGesture)
        
        return mapView
}

添加和删除方法，将移动圆坐标更新为

func updateMovingCircle(regionToUpdate: MKCoordinateRegion, view: MKMapView) {
        DispatchQueue.main.async {
            addMovingCircle(to: view, movingLocation: CLLocationCoordinate2D(latitude: regionToUpdate.center.latitude, longitude: regionToUpdate.center.longitude), radius: radius)
        }
    }

添加和删除圆圈的功能

func addMovingCircle(to view: MKMapView, movingLocation: CLLocationCoordinate2D, radius: Int) {
        for overlay in overlays where overlay.title == "1" {
            view.removeOverlay(overlay)
        }
        let radius: Double = Double(radius) * 1.5
        let movingCircle = MKCircle(center: movingLocation, radius: radius * 1000)
        movingCircle.title = "1"
        view.addOverlay(movingCircle)
    }

协调器上的手势识别器委托方法

 @objc func addPinBasedOnGesture(_ gestureRecognizer: UIGestureRecognizer) {
        if let mapView = gestureRecognizer.view as? MKMapView {
          mapViewController.updateMovingCircle(regionToUpdate: mapView.region, view: mapView)
        }
    }
    
    func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
        return true
    }
    
    func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldReceive touch: UITouch) -> Bool {
        return true
    }
    
    func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
        return true
    }

叠加渲染器

func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {        
        
        if let circleOverlay = overlay as? MKCircle {
            let circleRenderer = MKCircleRenderer(overlay: circleOverlay)
            circleRenderer.strokeColor = UIColor(Color.SG.purple)
            circleRenderer.lineWidth = 2
            circleRenderer.lineDashPattern = [2, 5]
            return circleRenderer
        }
        
        return MKOverlayRenderer()
    }

此代码可以运行，但体验不流畅并且圆圈闪烁

Answer 1

我想采用不同的方法。您可以将整个 MapView 添加到 ZStack 中并在地图上方添加

MKCircle

。然后，无论您如何与地图交互，MKCircle 都会保持在中心位置。

var body: some View {
    ZStack {
        MapViewSUI()

        Image(systemName: "mappin.circle")
            .resizable()
            .frame(width: 44, height: 44)
            .foregroundColor(.red)
    }
}