使用 swift 以编程方式在图钉顶部带有图像和文本的 iOS MapKit 自定义标注

Question

我正在尝试在地图中的图钉顶部显示自定义呼叫。我需要在图钉顶部显示带有一些文字的图像作为我的呼唤。我编写的代码产生以下输出。

但是，我想要的输出如下所示：

我怎样才能达到我想要的输出？请注意，气泡是必须使用的图像资产，我知道如何使用 CAShapeLayer 绘制气泡，但这并不能完成我想要的。这是到目前为止的代码。

// methods for Custom annotations

    func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {

        let annotationView = MKAnnotationView(annotation: pin, reuseIdentifier: "UserLocation")
        annotationView.image = UIImage(named: "marker")
        annotationView.canShowCallout = true
        configureDetailView(annotationView: annotationView)

        return annotationView

    }


    func configureDetailView(annotationView: MKAnnotationView) {
        let width = 300
        let height = 200

        let calloutView = UIView()
        calloutView.translatesAutoresizingMaskIntoConstraints = false

        let views = ["calloutView": calloutView]

        calloutView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:[calloutView(300)]", options: [], metrics: nil, views: views))
        calloutView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:[calloutView(200)]", options: [], metrics: nil, views: views))


        let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: width, height: height))
        imageView.image = UIImage(named: "address_back")

        calloutView.addSubview(imageView)

        annotationView.detailCalloutAccessoryView = calloutView
    }

请注意：我已经看过这篇文章：自定义 MKAnnotation 标注视图？但它没有完成我想要的，因为它绘制气泡而不是使用我的气泡图像。以下存储库将为您提供示例项目（在地图上绘制形状而不是使用图像，当您在右下角运行项目时，您会看到“Drop pin”点击它，然后点击 pin 以查看绘制的气泡）。

准备使用的骨架：https : //github.com/robertmryan/CustomMapViewAnnotationCalloutSwift