一尘不染

自定义MKAnnotation标注视图?

swift

我有一个 MKPointAnnotation:

let ann = MKPointAnnotation()
self.ann.coordinate = annLoc
self.ann.title = "Customize me"
self.ann.subtitle = "???"
self.mapView.addAnnotation(ann)

阅读 419

收藏
2020-07-07

共1个答案

一尘不染

首先应注意,通过简单地调整系统提供的标注的属性,但
自定义左右附件(通过rightCalloutAccessoryView和leftCalloutAccessoryView),就可以对标注进行最简单的更改。您可以在中进行配置viewForAnnotation。

从iOS 9开始,我们可以使用detailCalloutAccessoryViewwhich来用可能具有丰富视觉效果的视图替换标注的字幕,同时仍然享受标注气泡的自动呈现(使用自动布局可使此操作变得更容易)。

例如,这是一个标注,用于 在细节标注附件中为图像视图MKSnapshotter提供图像
,如WWDC 2015视频 MapKit 的新增功能

您可以通过以下方式实现此目的:

class SnapshotAnnotationView: MKPinAnnotationView {
    override var annotation: MKAnnotation? { didSet { configureDetailView() } }

    override init(annotation: MKAnnotation?, reuseIdentifier: String?) {
        super.init(annotation: annotation, reuseIdentifier: reuseIdentifier)
        configure()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        configure()
    }
}

private extension SnapshotAnnotationView {
    func configure() {
        canShowCallout = true
        configureDetailView()
    }

    func configureDetailView() {
        guard let annotation = annotation else { return }

        let rect = CGRect(origin: .zero, size: CGSize(width: 300, height: 200))

        let snapshotView = UIView()
        snapshotView.translatesAutoresizingMaskIntoConstraints = false

        let options = MKMapSnapshotter.Options()
        options.size = rect.size
        options.mapType = .satelliteFlyover
        options.camera = MKMapCamera(lookingAtCenter: annotation.coordinate, fromDistance: 250, pitch: 65, heading: 0)

        let snapshotter = MKMapSnapshotter(options: options)
        snapshotter.start { snapshot, error in
            guard let snapshot = snapshot, error == nil else {
                print(error ?? "Unknown error")
                return
            }

            let imageView = UIImageView(frame: rect)
            imageView.image = snapshot.image
            snapshotView.addSubview(imageView)
        }

        detailCalloutAccessoryView = snapshotView
        NSLayoutConstraint.activate([
            snapshotView.widthAnchor.constraint(equalToConstant: rect.width),
            snapshotView.heightAnchor.constraint(equalToConstant: rect.height)
        ])
    }
}

当然,您随后将在地图中注册该注释视图,并且完全
mapView(_:viewFor:)不需要:

mapView.register(SnapshotAnnotationView.self, forAnnotationViewWithReuseIdentifier: MKMapViewDefaultAnnotationViewReuseIdentifier)

如果您希望对标注进行更彻底的重新设计,或者需要
支持9之前的iOS版本,则需要进行更多工作。该过程需要(a)
禁用默认标注;(b)当用户点击
现有注释视图(即地图上的可视图钉)时添加您自己的视图。

然后,标注的设计就变得很复杂,您必须在其中绘制想要显示的所有内容。例如,如果您想绘制气泡以产生呼出的弹出效果,则必须自己完成。但是,对于如何绘制形状,图像,文本等有所了解,您应该能够
渲染实现所需UX的标注:

自定义标注

只需将视图添加为注释视图本身的子视图,然后相应地调整其约束即可:

func mapView(_ mapView: MKMapView, didSelect view: MKAnnotationView) {
    let calloutView = ...
    calloutView.translatesAutoresizingMaskIntoConstraints = false
    calloutView.backgroundColor = UIColor.lightGray
    view.addSubview(calloutView)

    NSLayoutConstraint.activate([
        calloutView.bottomAnchor.constraint(equalTo: view.topAnchor, constant: 0),
        calloutView.widthAnchor.constraint(equalToConstant: 60),
        calloutView.heightAnchor.constraint(equalToConstant: 30),
        calloutView.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: view.calloutOffset.x)
    ])
}

见https://github.com/robertmryan/CustomMapViewAnnotationCalloutSwift为
创建自己的标注视图的一个例子。这仅添加了两个标签,但它说明了您可以绘制所需形状的气泡,使用
约束来指定标注大小等事实。

2020-07-07