使用图像创建自定义地图注释标注，从数组访问数据

Question

我从 JSON 文件中解析了一组数据（参见下面的示例）：

{
    "locations": [

        {
            "id": "0001",
            "name": "Helensburgh Tunnels",
            "type": "Tunnels, Beach, Views",
            "location": "Helensburgh, South Coast",
            "image": "Helensburgh-Tunnels.jpg",
            "activity": "Walking, photography, tunnelling",
            "isVisited": false,
            "latitude": -34.178985,
            "longitude": 150.992867
        }
    ]
}

我能够将所有这些数据正确读入 TableView（一切正常），但是，我还想将 JSON 文件中的所有位置显示为 MapView 上的注释。到目前为止，除了标注框左侧的预览图像外，一切都正确显示（所有注释图钉出现，单击时它们显示带有标题和副标题的标注，但没有图像）。

我需要解决什么问题才能显示此图片？我可以在我的应用程序的其他部分实现它，其中只显示一个位置，但是，我似乎无法弄清楚如何将图像添加到该视图中的所有注释标注。

这是我用来在我的 NearMeMapViewController 中填充注释的代码：

import UIKit
import MapKit
import CoreLocation

class NearMeMapViewController: UIViewController, MKMapViewDelegate, CLLocationManagerDelegate {

    @IBOutlet var nearMeMap: MKMapView!

    let locationManager = CLLocationManager()

    var locations = [Location]()
    var location:Location!

    override func viewDidLoad() {
        super.viewDidLoad()

        // parse json
        if let locationJson = readLocation(){
            if let locationArray = locationJson["locations"] as? [[String:Any]]{
                for location in locationArray{
                    locations.append(Location.init(locationInfo: location))
                }
                print(locations.count)
            }
        }
        // end parse json

        nearMeMap.delegate = self

        self.locationManager.delegate = self
        self.locationManager.desiredAccuracy = kCLLocationAccuracyBest
        self.locationManager.requestWhenInUseAuthorization()
        self.locationManager.startUpdatingLocation()
        self.nearMeMap.showsUserLocation = true

        // Show annotation
        for location in locations {
            let annotation = MKPointAnnotation()
            annotation.title = location.name
            annotation.subtitle = location.type
            annotation.coordinate = CLLocationCoordinate2D(latitude: location.latitude, longitude: location.longitude)
            nearMeMap.addAnnotation(annotation)

        }

    }


    // Start test - Custom annotation callout with image
    func nearMeMap (_ nearMeMap: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {

        let identifier = "MyPin"

        if annotation.isKind(of: MKUserLocation.self) {
        return nil
        }

        // Reuse the annotation if possible
        var annotationView:MKPinAnnotationView? = nearMeMap.dequeueReusableAnnotationView(withIdentifier: identifier) as? MKPinAnnotationView

        if annotationView == nil {
            annotationView = MKPinAnnotationView(annotation: annotation, reuseIdentifier: identifier)
            annotationView?.canShowCallout = true
        }

        let leftIconView = UIImageView(frame: CGRect.init(x: 0, y: 0, width: 53, height: 53))
        leftIconView.image = UIImage(named: location.image)
        annotationView?.leftCalloutAccessoryView = leftIconView

        return annotationView
    }
    // End test

如果有任何帮助，我将不胜感激！我是一名学生，我只是在学习，如果我使用了任何不正确的术语或有菜鸟错误，我深表歉意。

Answer 1

如果您想为注释视图设置自定义图像，请选择 MKAnnotationView 而不是 MKPinAnnotationView。您可以通过将自定义图像设置为 MKAnnotationView 的 Image 属性来将其设置为注释。检查 here 以获取有关 MKAnnotationView 的更多信息。

由于 MKPinAnnotationView 是 MKAnnotationView 的子类，它有一个图像属性但它通常（通常是在您不期望它的时候）忽略它并显示其内置的-在 pin 图像中。

所以最好只使用普通的 MKAnnotationView。

参见 this answer for more details.You can use MKAnnotationView as explained here。

----- 编辑 -----

隐藏您的基本 Callout 以显示您的自定义图像。

 annotationView?.canShowCallout = false

详细教程请参考 to customize CallOut images. Check thislink

希望对您有所帮助。快乐编码！！

Answer 2

Swift 3.0

在上面的代码中 MKMapViewDelegate 应该是

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

而不是

func nearMeMap (_ nearMeMap: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {...}

添加var currentIndex = 0作为全局声明以标识当前图像索引。否则，您知道使用 JSON 响应中的 id。

即全局作用域变成如下代码，

let locationManager = CLLocationManager()

var locations = [Location]()
//test variable? implemented to resolve issue with images in custom callout
var location:Location!

var currentIndex = 0
override func viewDidLoad() {...}

那么，leftIconView会变成，

let leftIconView = UIImageView(frame: CGRect.init(x: 0, y: 0, width: 53, height: 53))

var images = [String]()
for location in locations{
    images.append(location.image)
}
leftIconView.image = UIImage(named: images[currentIndex])
self.currentIndex = self.currentIndex+1 //0,1,2,3...N.

输出：-

使用图像创建自定义地图注释标注，从数组访问数据

Creating a custom map annotation callout with an image, accessing data from an array

ios

swift

mkmapview

mapkit

mapkitannotation