带有 Mapbox 和 SwiftUI 的空白地图答案

【问题标题】：Blank Map with Mapbox and SwiftUI带有 Mapbox 和 SwiftUI 的空白地图
【发布时间】：2022-05-02 23:11:11
【问题描述】：

我尝试将 Mapbox 与 SwiftUI 一起使用。

我应用了这个答案https://stackoverflow.com/a/56551675/5653544，也关注了mapbox tutorial。

所以我有一个 MapView.swift 视图：

import SwiftUI
import Mapbox

extension MGLPointAnnotation {
    convenience init(title: String, coordinate: CLLocationCoordinate2D) {
        self.init()
        self.title = title
        self.coordinate = coordinate
    }
}

struct MapView: UIViewRepresentable {
    @Binding var annotations: [MGLPointAnnotation]

    private let mapView: MGLMapView = MGLMapView(frame: .zero, styleURL: MGLStyle.streetsStyleURL)

    // MARK: - Configuring UIViewRepresentable protocol

    func makeUIView(context: UIViewRepresentableContext<MapView>) -> MGLMapView {
        mapView.delegate = context.coordinator
        return mapView
    }

    func updateUIView(_ uiView: MGLMapView, context: UIViewRepresentableContext<MapView>) {
        updateAnnotations()
    }

    func makeCoordinator() -> MapView.Coordinator {
        Coordinator(self)
    }

    // MARK: - Configuring MGLMapView

    func styleURL(_ styleURL: URL) -> MapView {
        mapView.styleURL = styleURL
        return self
    }

    func centerCoordinate(_ centerCoordinate: CLLocationCoordinate2D) -> MapView {
        mapView.centerCoordinate = centerCoordinate
        return self
    }

    func zoomLevel(_ zoomLevel: Double) -> MapView {
        mapView.zoomLevel = zoomLevel
        return self
    }

    private func updateAnnotations() {
        if let currentAnnotations = mapView.annotations {
            mapView.removeAnnotations(currentAnnotations)
        }
        mapView.addAnnotations(annotations)
    }

    // MARK: - Implementing MGLMapViewDelegate

    final class Coordinator: NSObject, MGLMapViewDelegate {
        var control: MapView

        init(_ control: MapView) {
            self.control = control
        }

        func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {

            let coordinates = [
                CLLocationCoordinate2D(latitude: 37.791329, longitude: -122.396906),
                CLLocationCoordinate2D(latitude: 37.791591, longitude: -122.396566),
                CLLocationCoordinate2D(latitude: 37.791147, longitude: -122.396009),
                CLLocationCoordinate2D(latitude: 37.790883, longitude: -122.396349),
                CLLocationCoordinate2D(latitude: 37.791329, longitude: -122.396906),
            ]

            let buildingFeature = MGLPolygonFeature(coordinates: coordinates, count: 5)
            let shapeSource = MGLShapeSource(identifier: "buildingSource", features: [buildingFeature], options: nil)
            mapView.style?.addSource(shapeSource)

            let fillLayer = MGLFillStyleLayer(identifier: "buildingFillLayer", source: shapeSource)
            fillLayer.fillColor = NSExpression(forConstantValue: UIColor.blue)
            fillLayer.fillOpacity = NSExpression(forConstantValue: 0.5)

            mapView.style?.addLayer(fillLayer)

        }

        func mapView(_ mapView: MGLMapView, viewFor annotation: MGLAnnotation) -> MGLAnnotationView? {
            return nil
        }

        func mapView(_ mapView: MGLMapView, annotationCanShowCallout annotation: MGLAnnotation) -> Bool {
            return true
        }

    }

}

我的 ContentView.swift 调用 MapView：

import SwiftUI
import Mapbox

struct ContentView: View {

    @State var annotations: [MGLPointAnnotation] = [
        MGLPointAnnotation(title: "Mapbox", coordinate: .init(latitude: 37.791434, longitude: -122.396267))
    ]

    var body: some View {
        MapView(annotations: $annotations).centerCoordinate(.init(latitude: 37.791293, longitude: -122.396324)).zoomLevel(16)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

我还创建了一个 ~/.mapbox 文件，其中包含我通过我的 mapbox 帐户获得的 mapbox 令牌。但我有一张空白地图：

当我下载并运行mapbox example 时，它运行良好，所以我认为这不是因为我的 Xcode 版本。有没有人知道为什么我自己创建项目时无法加载地图？

Xcode 版本：11.3

Mapbox 版本：5.3.0

【问题讨论】：

您能提供 Mapbox 的实现（代码）吗？
您是否将 Mapbox MGLMapboxAccessToken 设置在 AppDelegate 或 info.plist 中？
我重新发布了我的帖子，为您提供有关我的 Mapbox 实现以及我如何设置 Mapbox 令牌的更多信息。我没有在 MGLMapboxAccessToken 或 info.plist 中设置令牌，但我将它写在 ~/.mapbox 文件中，因为说要这样做的错误。

标签： ios swift swiftui mapbox

【解决方案1】：

您需要在 Info.plist 中设置您的MGLMapboxAccessToken。

【讨论】：

谢谢它有效。 mapbox demo 有一个 insert_access_token.sh 脚本，用于管理根目录上的令牌，这就是我迷路的原因。

【解决方案2】：

我不知道我是否应该为此创建一个新请求，但我遇到了同样的问题，而且我在 Info.plist 中也有 MGLMapboxAccessToken（由 @andrewcar 提议）。

在我的情况下，当应用程序被发送到后台然后再发送到前台时，我遇到了这个问题。

我通过在UIApplication.didBecomeActiveNotification 通知中添加观察者并执行不明显的缩放更改来修复它：

在viewDidLoad我加了：

let becomeActiveNotification = NotificationCenter.default
becomeActiveNotification.addObserver(self, selector: #selector(didBecomeActiveNotification), name: UIApplication.didBecomeActiveNotification, object: nil)

然后我就这样实现了didBecomeActiveNotification：

@objc func didBecomeActiveNotification() {
    self.mapView.setZoomLevel(14, animated: false)
    self.mapView.setZoomLevel(15, animated: false) // 15 is my desired zoom level
}

我希望它对某人有所帮助，我几乎无法找到我的问题的答案。

【讨论】：