SwiftUI:如何在地图上显示多个图钉? [英] SwiftUI: How to display multiple pins on Map?

问题描述

所以我目前有这段代码，用于显示其中带有图钉的地图.

So I currently have this code that displays a map with a pin in it.

但是我想知道如何显示多个图钉而不只是一个图钉，并且还显示用户的当前位置，因此如果用户将点"移动到屏幕上，则显示.".还应该移动

But I was wondering how I Can display multiple pins and not just one and also display the users current location, so if the user moves the "dot" should also move

如果用户点击其中的图钉，我想在控制台上打印一些内容

And if the users clicks on of the pins I would like to print something to the console

  struct GeoPointView : View {
        var position : GeoPoint
        
        struct IdentifiablePoint: Identifiable {
            var id = UUID()
            var position : GeoPoint
        }
        
        var body: some View {
            
            Map(coordinateRegion: .constant(
                    MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: position.latitude, longitude: position.longitude), span: MKCoordinateSpan(latitudeDelta: 0.01, longitudeDelta: 0.01))), annotationItems: [position].map { IdentifiablePoint(position: $0)}) { point in
                
                MapPin(coordinate: CLLocationCoordinate2D(latitude: point.position.latitude, longitude: point.position.longitude))
            }
            .cornerRadius(10)
        }
    }

推荐答案

要显示多个点，您需要一个 GeoPoint s数组.

To display multiple points, you'll want an array of GeoPoints.

然后，您可能想对地图的中心/缩放位置进行一些合理化处理，以查看所有点.我已将其包含在我的 centerOfPoints 计算属性中.

Then, you'd probably want to do some rationalization of where the map is centered/zoomed to see all of the points. I've included this in my centerOfPoints calculated property.

struct GeoPointView : View {
    var positions : [GeoPoint]
    
    struct IdentifiablePoint: Identifiable {
        var id = UUID()
        var position : GeoPoint
    }
    
    var centerOfPoints : (center: CLLocationCoordinate2D, span: MKCoordinateSpan) {
        var minLat = 91.0
        var maxLat = -91.0
        var minLon = 181.0
        var maxLon = -181.0
        
        for i in positions {
            maxLat = max(maxLat, i.latitude)
            minLat = min(minLat, i.latitude)
            maxLon = max(maxLon, i.longitude)
            minLon = min(minLon, i.longitude)
        }
        
        let center = CLLocationCoordinate2D(latitude: (maxLat + minLat) / 2,
                                           longitude: (maxLon + minLon) / 2)
        
        let span = MKCoordinateSpan(latitudeDelta: abs(maxLat - minLat) * 1.3,
                                    longitudeDelta: abs(maxLon - minLon) * 1.3)
        return (center: center,
                span: span)
    }
    
    var body: some View {
        let center = centerOfPoints
        
        return Map(coordinateRegion: .constant(MKCoordinateRegion(center: center.center, span: center.span)), showsUserLocation: true, annotationItems: positions.map { IdentifiablePoint(position: $0)}) { (point) in
            MapPin(coordinate: CLLocationCoordinate2D(latitude: point.position.latitude,
                                                      longitude: point.position.longitude))
        }
    }
}

您可以这样称呼它:

GeoPointView(positions: [GeoPoint(latitude: 43.0, longitude: -75),
                                 GeoPoint(latitude: 41.0, longitude: -75),
                                 GeoPoint(latitude: 41.0, longitude: -85),
        ])

我在地图上添加了 showsUserLocation:true ，以显示用户位置的蓝点.请注意，这需要其他设置，将其添加到您的Info.plist中并请求访问位置数据的权限. https://fluffy.es/current-location/似乎是一些合理的教程.如果您需要其他帮助来设置权限，建议将其分解为另一个问题，因为该问题的范围已经很大.

I've added a showsUserLocation: true to the map to show the blue dot for user location. Note that this requires additional setup, adding to your Info.plist and requesting permission to access location data. https://fluffy.es/current-location/ seems like a reasonable tutorial for some of this. If you need additional help getting the permissions set up, I'd suggest splitting that off into another question as this one is already quite large in scope.

我看不到有可用的API来告诉您是否已敲出地图图钉，尽管也许有人会听到有关该图钉的信息.

I'm not seeing an API available for telling if a map pin has been tapped, although perhaps someone else will chime in with info about that.

这篇关于SwiftUI:如何在地图上显示多个图钉?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！