ios - 显示图像和标题的 MapView 注释

Question

我正在开发一个应用程序，我应该在其中显示显示图像和标题的 MapView 注释。以下 View Controller Swift 代码在下方显示了带有所需标题的默认图钉图像:

import UIKit
import MapKit

class ViewController: UIViewController, MKMapViewDelegate, CLLocationManagerDelegate {

    @IBOutlet weak var mapView: MKMapView!

    var locationManager = CLLocationManager()

    override func viewDidLoad() {
        super.viewDidLoad()

        mapView.delegate = self
        locationManager.delegate = self

        // Define zoom
        let deltaLat: CLLocationDegrees = 1.0
        let deltaLon: CLLocationDegrees = 1.0

        // Define location of center coordinates
        let location: CLLocationCoordinate2D = CLLocationCoordinate2DMake(-15.3, -47.0)        

        // Define area to be viwed
        let areaVisual: MKCoordinateSpan = MKCoordinateSpanMake(deltaLat, deltaLon)
        let region = MKCoordinateRegionMake(location, areaVisual)
        let annotation = MKPointAnnotation()   
        annotation.coordinate = location
        annotation.title = "SDKP"
        mapView.addAnnotation(annotation)

        // Show map region defined by the above parameters
        mapView.setRegion(region, animated: true)
    }

    /*
    // Show an image for annotation
    func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
        let annotationView = MKAnnotationView(annotation: annotation, reuseIdentifier: nil)
        annotationView.image =  imageLiteral(resourceName: "AnnotationImage")
        return annotationView
    }
    */
}

这是我得到的 MapView:

当我取消注释注释方法的 View 时，我得到了所需的注释图像，但没有标题:

关于如何同时获取注释的图像和标题有什么想法吗？

Answer 1

我找到了一个解决方案，我在下面的代码中使用 func imageFromLabel(_:) 来扩展 UIImage 以从作为标题的标签文本创建图像对于注释。然后我通过 func combineImageAndTitle(_:_:) 将注释图像与这个标题图像结合起来。最后，这个组合图像由 mapView 委托(delegate)方法 viewFor annotation 显示。

由于我仍然是 Swift 的初学者，我不确定这是否是最好的方法。但这个解决方案对我来说效果很好。

import UIKit
import MapKit

class ViewController: UIViewController, MKMapViewDelegate, CLLocationManagerDelegate {

    @IBOutlet weak var mapView: MKMapView!

    var locationManager = CLLocationManager()

    override func viewDidLoad() {
        super.viewDidLoad()

        mapView.delegate = self
        locationManager.delegate = self

        // Define zoom
        let deltaLat: CLLocationDegrees = 1.0
        let deltaLon: CLLocationDegrees = 1.0

        // Define location of center coordinates
        let location: CLLocationCoordinate2D = CLLocationCoordinate2DMake(-15.3, -47.0)

        // Define area to be viwed
        let areaVisual: MKCoordinateSpan = MKCoordinateSpan(latitudeDelta: deltaLat, longitudeDelta: deltaLon)
        let region = MKCoordinateRegion(center: location, span: areaVisual)
        let annotation = MKPointAnnotation()
        annotation.coordinate = location
        annotation.title = "SDKP"
        mapView.addAnnotation(annotation)

        // Show map region defined by the above parameters
        mapView.setRegion(region, animated: true)
    }


    // Delegate method for mapView
    func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
        let annotationView = MKAnnotationView(annotation: annotation, reuseIdentifier: nil)
        let imageForAnnotation = #imageLiteral(resourceName: "BaseImage")
        let annotationTitle = (annotation.title ?? "") ?? ""
        //annotationView.image = imageForAnnotation
        annotationView.image = combineImageAndTitle(image: imageForAnnotation, title: annotationTitle)
        return annotationView
    }


    /// Combine image and title in one image.
    func combineImageAndTitle(image: UIImage, title: String) -> UIImage {
        // Create an image from ident text
        let label = UILabel(frame: CGRect(x: 0, y: 0, width: 100, height: 20))
        label.numberOfLines = 1
        label.textAlignment = .center
        label.textColor = UIColor.black
        label.text = title
        let titleImage = UIImage.imageFromLabel(label: label)

        // Resulting image has a 100 by 100 size
        let contextSize = CGSize(width: 100, height: 100)

        UIGraphicsBeginImageContextWithOptions(contextSize, false, UIScreen.main.scale)

        let rect1 = CGRect(x: 50 - Int(image.size.width / 2), y: 50 - Int(image.size.height / 2), width: Int(image.size.width), height: Int(image.size.height))
        image.draw(in: rect1)

        let rect2 = CGRect(x: 0, y: 53 + Int(image.size.height / 2), width: Int(titleImage.size.width), height: Int(titleImage.size.height))
        titleImage.draw(in: rect2)

        let combinedImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return combinedImage!
    }

}


extension UIImage {
    /// Convert a label to an image
    class func imageFromLabel(label: UILabel) -> UIImage {
        UIGraphicsBeginImageContextWithOptions(label.bounds.size, false, 0.0)
        label.layer.render(in: UIGraphicsGetCurrentContext()!)
        let img = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return img!
    }
}

And this is the resulting MapView.