ios - 自定义 MKAnnotation 标注 View ？

Question

我有一个MKPointAnnotation:

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

看起来像这样:

我如何自定义此标注 View 以创建我自己的 View 而不是预定义的 View ？

Answer 1

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

从 iOS 9 开始，我们可以访问 detailCalloutAccessoryView，它用可能具有丰富视觉效果的 View 替换标注的副标题，同时仍然享受标注气泡的自动再现(使用自动布局使这更容易)。

例如，这里有一个标注使用 MKSnapshotter 为细节标注附件中的 ImageView 提供图像，如 WWDC 2015 视频 What's New in 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)
        ])
    }
}

当然，您随后会在 map 中注册该注释 View ，并且根本不需要 mapView(_:viewFor:):

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

如果您正在寻找更彻底的标注重新设计或需要支持 9 之前的 iOS 版本，则需要做更多的工作。该过程需要 (a) 禁用默认标注； (b) 当用户点击现有注释 View (即 map 上的可 View 钉)时添加您自己的 View 。

然后复杂性出现在标注的设计中，您必须在其中绘制您想要显示的所有内容。例如。如果你想画一个气泡来产生呼出的弹出窗口的感觉，你必须自己做。但是在熟悉如何绘制形状、图像、文本等之后，您应该能够渲染实现所需用户体验的标注:

只需将 View 添加为注释 View 本身的 subview ，并相应地调整其约束:

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有关创建自己的标注 View 的示例。这只添加了两个标签，但它说明了一个事实，即您可以绘制任何您想要的形状的气泡，使用约束来指定标注的大小等。