Link MKMapView 中的注释气泡内

Question

是否可以在 MapKit 的注释中使用 link？

我希望能够在此气泡内显示更多文本，在单击注释时显示，例如单击 "Show more" - link（但仅在单击时显示）否则它只显示例如注释的标题。

Answer 1

我们将使用 MKAnnotationView 的以下子类来添加注释，如下所示：

class CustomAnnotation: MKPointAnnotation {
    var isCollapsed = true // current state

    // set true when user taps the link to expand/collapse annotation-view
    var setNeedsToggle = false
}

let annotation = CustomAnnotation()
annotation.coordinate = self.mapView.centerCoordinate
annotation.title = "Annotation Title"
mapView.addAnnotation(annotation)

在viewForAnnotation中我们使用detailCalloutAccessoryView和rightCalloutAccessoryView来显示描述和切换link，像这样：

func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
    guard let annot = annotation as? CustomAnnotation else { return nil }

    // Initialize AnnotationView
    var annotationView: MKAnnotationView! = mapView.dequeueReusableAnnotationView(withIdentifier: "AnID")
    if (annotationView == nil) {
        annotationView = MKPinAnnotationView(annotation: annotation, reuseIdentifier: "AnID")
        annotationView.canShowCallout = true
    } else {
        annotationView.annotation = annotation
    }

    // Expand/Collapse Button
    let rightButton = UIButton(type: .detailDisclosure)
    rightButton.setImage(UIImage(named: annot.isCollapsed ? "ic_showmore" : "ic_showless"), for: .normal)
    annotationView.rightCalloutAccessoryView = rightButton

    // Description View
    if (annot.isCollapsed) {
        annotationView.detailCalloutAccessoryView = nil
    } else {
        let label = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 21))
        label.text = "A longer description in place to be shown when the accessory view is tapped"
        label.font = UIFont.italicSystemFont(ofSize: 14.0)
        label.numberOfLines = 0
        annotationView.detailCalloutAccessoryView = label

        label.widthAnchor.constraint(lessThanOrEqualToConstant: label.frame.width).isActive = true
        label.heightAnchor.constraint(lessThanOrEqualToConstant: 90.0).isActive = true
    }

    return annotationView
}

calloutAccessoryControlTapped 事件在点击 link 时触发，因此我们 expand/collapse 我们的注释视图，如下所示：

func mapView(_ mapView: MKMapView, annotationView view: MKAnnotationView, calloutAccessoryControlTapped control: UIControl) {
    guard let oldAnnot = view.annotation as? CustomAnnotation else { return }

    let annotation = CustomAnnotation()
    annotation.coordinate = oldAnnot.coordinate
    annotation.title = oldAnnot.title
    annotation.setNeedsToggle = true
    if (oldAnnot.isCollapsed) {
        annotation.isCollapsed = false
    }

    mapView.removeAnnotation(oldAnnot)
    mapView.addAnnotation(annotation)
}

最后我们检查 setNeedsToggle 是否为真，所以我们显示 expanded/collapsed 注释视图，如下所示：

func mapView(_ mapView: MKMapView, didAdd views: [MKAnnotationView]) {
    for view in views {
        if let annotation = view.annotation as? CustomAnnotation, annotation.setNeedsToggle {
            mapView.selectAnnotation(annotation, animated: true)
            return
        }
    }
}

这里是 expanded/collapsed 观看次数：

Link MKMapView 中的注释气泡内

Link inside annotation bubble in MKMapView

swift

mkmapview