ios - Mapbox 标记个性化

Question

有谁知道我如何使用不同的注释图像创建像这样的个性化地图框标记。目前我只能弄清楚如何在我的项目中添加一个注释。有没有办法添加多个注释？

我从这里开始https://docs.mapbox.com/ios/maps/examples/annotation-view-image/但不确定下一步该去哪里。

谢谢

Answer 1

首先，您必须在地图中添加一些点注释，然后为每个注释显示图像或视图。注释将放置在坐标上，因此您必须创建一些随机坐标。

您可以像这样向地图添加点注释：

// Specify coordinates for our annotations.
let coordinates = [
    CLLocationCoordinate2D(latitude: 0, longitude: 33),
    CLLocationCoordinate2D(latitude: 0, longitude: 66),
    CLLocationCoordinate2D(latitude: 0, longitude: 99)
]

// Fill an array with point annotations and add it to the map.
var pointAnnotations = [MGLPointAnnotation]()
for coordinate in coordinates {
    let point = MGLPointAnnotation()
    point.coordinate = coordinate
    point.title = "\(coordinate.latitude), \(coordinate.longitude)"
    pointAnnotations.append(point)
}

mapView.addAnnotations(pointAnnotations)

此代码取自此示例：注释视图

然后你必须遵守MGLMapViewDelegate才能调用mapView(_:imageFor:)委托方法：

// MGLMapViewDelegate method for adding static images to point annotations
func mapView(_ mapView: MGLMapView, imageFor annotation: MGLAnnotation) -> MGLAnnotationImage? {
    
    let annotationImage: MGLAnnotationImage
    let annotationImageCocktail = mapView.dequeueReusableAnnotationImage(withIdentifier: "cocktail")
    let annotationImageSushi = mapView.dequeueReusableAnnotationImage(withIdentifier: "sushi")
    
    switch annotation.coordinate.longitude {
    case 33:
        annotationImage = annotationImageCocktail ?? MGLAnnotationImage(image: UIImage(named: "cocktail")!, reuseIdentifier: "cocktail")
    case 66:
        annotationImage = annotationImageSushi ?? MGLAnnotationImage(image: UIImage(named: "sushi")!, reuseIdentifier: "sushi")
    case 99:
        annotationImage = annotationImageCocktail ??  MGLAnnotationImage(image: UIImage(named: "cocktail")!, reuseIdentifier: "cocktail")
    default:
        annotationImage = annotationImageSushi ?? MGLAnnotationImage(image: UIImage(named: "sushi")!, reuseIdentifier: "sushi")
    }
    
    return annotationImage
}

这是整个代码：

import Mapbox

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // Method for displaying map view
        let mapView = MGLMapView(frame: view.bounds)
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        mapView.styleURL = MGLStyle.darkStyleURL
        mapView.tintColor = .lightGray
        mapView.centerCoordinate = CLLocationCoordinate2D(latitude: 0, longitude: 66)
        mapView.zoomLevel = 2
        mapView.delegate = self
        view.addSubview(mapView)

        // Specify coordinates for our annotations.
        let coordinates = [
            CLLocationCoordinate2D(latitude: 0, longitude: 33),
            CLLocationCoordinate2D(latitude: 0, longitude: 66),
            CLLocationCoordinate2D(latitude: 0, longitude: 99)
        ]

        // Fill an array with point annotations and add it to the map.
        var pointAnnotations = [MGLPointAnnotation]()
        for coordinate in coordinates {
            let point = MGLPointAnnotation()
            point.coordinate = coordinate
            point.title = "\(coordinate.latitude), \(coordinate.longitude)"
            pointAnnotations.append(point)
        }

        mapView.addAnnotations(pointAnnotations)
    }

}

extension ViewController: MGLMapViewDelegate {
    
    // MGLMapViewDelegate method for adding static images to point annotations
    func mapView(_ mapView: MGLMapView, imageFor annotation: MGLAnnotation) -> MGLAnnotationImage? {

        let annotationImage: MGLAnnotationImage
        let annotationImageCocktail = mapView.dequeueReusableAnnotationImage(withIdentifier: "cocktail")
        let annotationImageSushi = mapView.dequeueReusableAnnotationImage(withIdentifier: "sushi")

        switch annotation.coordinate.longitude {
        case 33:
            annotationImage = annotationImageCocktail ?? MGLAnnotationImage(image: UIImage(named: "cocktail")!, reuseIdentifier: "cocktail")
        case 66:
            annotationImage = annotationImageSushi ?? MGLAnnotationImage(image: UIImage(named: "sushi")!, reuseIdentifier: "sushi")
        case 99:
            annotationImage = annotationImageCocktail ??  MGLAnnotationImage(image: UIImage(named: "cocktail")!, reuseIdentifier: "cocktail")
        default:
            annotationImage = annotationImageSushi ?? MGLAnnotationImage(image: UIImage(named: "sushi")!, reuseIdentifier: "sushi")
        }

        return annotationImage
    }
}

当然你的项目必须包含名为鸡尾酒和寿司的图像。