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)

此代码取自此示例：Annotation views

那么你必须符合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
    }
}

当然你项目必须contation图像名为cocktail和sushi.

Mapbox 标记个性化

Mapbox marker personalisation

ios

mapbox

swift

mapbox-ios