时间戳

首页 > 解决方案 > 创建自定义 Mapbox 标记

ios - 创建自定义 Mapbox 标记

问题描述

我是在 iOS 上使用 MapBox 的新手，想知道是否有人有将自定义地图标记放到 iOS MapBox 地图上的经验。

我试过查看他们的文档，但他们只展示了如何使用 CSS 添加 HTML 标记，我不确定如何在 Swift 中实现。（https://docs.mapbox.com/help/tutorials/custom-markers-gl-js/#add-markers-to-the-map）

任何帮助我指出正确的方向将不胜感激！

标签： iosswiftxcodemapbox

解决方案

进入mapbox IOS SDK解锁所有答案并进入示例选项卡解锁可以回答大多数常见问题的代码片段。

但是，要回答你的问题。根据 mapBoxs 文档；这就是您将自定义图像显示为注释的方式。

import Mapbox

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

        let mapView = MGLMapView(frame: view.bounds, styleURL: MGLStyle.lightStyleURL)
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        mapView.tintColor = .darkGray

        // Set the map's bounds to Pisa, Italy.
        let bounds = MGLCoordinateBounds(
            sw: CLLocationCoordinate2D(latitude: 43.7115, longitude: 10.3725),
            ne: CLLocationCoordinate2D(latitude: 43.7318, longitude: 10.4222))
        mapView.setVisibleCoordinateBounds(bounds, animated: false)

        view.addSubview(mapView)

        // Set the map view‘s delegate property.
        mapView.delegate = self

        // Initialize and add the point annotation.
        let pisa = MGLPointAnnotation()
        pisa.coordinate = CLLocationCoordinate2D(latitude: 43.72305, longitude: 10.396633)
        pisa.title = "Leaning Tower of Pisa"
        mapView.addAnnotation(pisa)
    }

    func mapView(_ mapView: MGLMapView, imageFor annotation: MGLAnnotation) -> MGLAnnotationImage? {
        // Try to reuse the existing ‘pisa’ annotation image, if it exists.
        var annotationImage = mapView.dequeueReusableAnnotationImage(withIdentifier: "pisa")

        if annotationImage == nil {
            // Leaning Tower of Pisa by Stefan Spieler from the Noun Project.
            var image = UIImage(named: "pisavector")!

            // The anchor point of an annotation is currently always the center. To
            // shift the anchor point to the bottom of the annotation, the image
            // asset includes transparent bottom padding equal to the original image
            // height.
            //
            // To make this padding non-interactive, we create another image object
            // with a custom alignment rect that excludes the padding.
            image = image.withAlignmentRectInsets(UIEdgeInsets(top: 0, left: 0, bottom: image.size.height/2, right: 0))

            // Initialize the ‘pisa’ annotation image with the UIImage we just loaded.
            annotationImage = MGLAnnotationImage(image: image, reuseIdentifier: "pisa")
        }

        return annotationImage
    }

    func mapView(_ mapView: MGLMapView, annotationCanShowCallout annotation: MGLAnnotation) -> Bool {
        // Always allow callouts to popup when annotations are tapped.
        return true
    }
}

希望这有帮助！

推荐阅读