【问题标题】:Creating MapView from decoded coordinates - swift从解码的坐标创建 MapView - swift
【发布时间】:2021-01-17 16:14:08
【问题描述】:

我正在使用自定义坐标设置 MapView。到目前为止,这是我的代码

var coordModel: AirportModel?

struct MapView: View {
    
    
    
    @Binding private var lat: Double
    @Binding private var lon: Double

    private let initialLatitudinalMetres: Double = coordModel?.airportLat ?? 0
    private let initialLongitudinalMetres: Double = coordModel?.airportLong ?? 0

    @State private var span: MKCoordinateSpan?

    init(lat: Binding<Double>, lon: Binding<Double>) {
        _lat = lat
        _lon = lon
    }

    private var region: Binding<MKCoordinateRegion> {
        Binding {
            let centre = CLLocationCoordinate2D(latitude: lat, longitude: lon)

            if let span = span {
                return MKCoordinateRegion(center: centre, span: span)
            } else {
                return MKCoordinateRegion(center: centre, latitudinalMeters: initialLatitudinalMetres, longitudinalMeters: initialLongitudinalMetres)
            }
        } set: { region in
            lat = region.center.latitude
            lon = region.center.longitude
            span = region.span
        }
    }

    var body: some View {
        Map(coordinateRegion: region)
    }
}

在 AirportModel 中,有一段以 Double 形式解码的数据,称为“纬度”和“经度”。我只是想在解码后将这些数据传递到视图中。这是我的观点主体:

var body: some View {
    
        ScrollView{
            MapView(lat: <#Binding<Double>#>, lon: <#Binding<Double>#>)
                .frame(height: 250)
                .edgesIgnoringSafeArea(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
}

我尝试将 coordModel?.latitude 和 coordModel?.longitude 放入 lat 和 lon,以及在调用上方设置变量。我不太确定现在该去哪里。

注意:我正在解码一堆 JSON 数据,每个用户查询都会产生不同的 lat/lon pull(超过 10000 个潜在响应)。再次感谢!

【问题讨论】:

  • 您的机场模型是包含建筑物和商店等形状还是仅包含点?如果你想在地图上显示形状,忘记 SwiftUI。 SwiftUI Maps 没有覆盖。如果您想要叠加层,请回到旧的 MKMapKit。
  • 它不应该显示除了最后一个长坐标组之外的任何东西
  • 您要搜索的是注解。这是一个如何显示注释的简单介绍:medium.com/better-programming/…
  • 那是一篇很棒的文章,谢谢。但是,我仍然需要弄清楚如何从 api 调用中传递解码的纬度和经度,并将它们动态地放在显示该机场天气报告的单个视图中 - 由于数量众多,我无法硬编码可能的机场。
  • 不回答您的问题:天气数据可以以地图图块的形式出现(不是您现在正在做的)而 SwiftUI 地图无法做到这一点,根本没有 TileOverlays 和覆盖。如果您需要此功能的可能性很小,请使用旧的MKMapKit

标签: ios swift dictionary view mapkit


【解决方案1】:

使用ObservableObject的模型:

import Combine
import MapKit

class MapModel: ObservableObject {
    
    var region: MKCoordinateRegion = MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 48.687330584, longitude: 9.219832454),
        latitudinalMeters: 1000000,
        longitudinalMeters: 1000000
    ) {
        willSet {
            self.objectWillChange.send()
        }
    }
    
    // MARK: - test code change center evey 10 seconds
    
    init() {
        
        self.timer = Timer.scheduledTimer(withTimeInterval: 10, repeats: true) { timer in
            self.testIndex += 1
            self.testIndex %= self.testCoordinates.count
            let newCenter = self.testCoordinates[self.testIndex]
            let oldSpan = self.region.span
            
            DispatchQueue.main.async {
                self.region = MKCoordinateRegion(center: newCenter, span: oldSpan)
            }
        }
    }
    
    let testCoordinates = [
        CLLocationCoordinate2D(latitude: 48.687330584, longitude: 9.219832454), // STR
        CLLocationCoordinate2D(latitude: 41.297445, longitude: 2.0832941),  // BCN
    ]
    var testIndex: Int = 0
    
    var timer: Timer? = nil
    
    
}

然后创建一个观察模型的视图

import SwiftUI
import MapKit

struct ContentView: View {
    @ObservedObject private var mapModel = MapModel()

    var body: some View {
        Map(coordinateRegion: $mapModel.region)
    }
}

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

出于测试原因,我使用了一个计时器来模拟来自服务器的更新数据。

如果您需要注释,请将它们添加到模型中,如果您更改它们,请不要忘记 self.objectWillChange.send()

【讨论】:

  • 如何修改该代码以在输入新查询时更新并执行相​​同的调用但每次使用不同的搜索查询?请参阅 avwx.docs.apiary.io/#reference/0/station/… 了解我试图从中获取纬度/经度的 API。
  • 只要设置 MapModel.region 地图就会自动更新
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-07-25
  • 2023-03-21
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多