SwiftUI中如何实现Map的Span≤0.1时显示地图标注？

希望地图标注（MapPin）仅当地图的Span≤0.1时才显示，大于0.1时不显示。当前的SwiftUI地图实现代码如下：

struct City: Identifiable {
    let id = UUID()
    let name: String
    let coordinate: CLLocationCoordinate2D
}

struct ContentView: View {
    @State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 51.507222, longitude: -0.1275), span: MKCoordinateSpan(latitudeDelta: 10, longitudeDelta: 10))

    let annotations = [
        City(name: "London", coordinate: CLLocationCoordinate2D(latitude: 51.507222, longitude: -0.1275)),
        City(name: "Paris", coordinate: CLLocationCoordinate2D(latitude: 48.8567, longitude: 2.3508)),
        City(name: "Rome", coordinate: CLLocationCoordinate2D(latitude: 41.9, longitude: 12.5)),
        City(name: "Washington DC", coordinate: CLLocationCoordinate2D(latitude: 38.895111, longitude: -77.036667))
    ]

    var body: some View {
        Map(coordinateRegion: $region, annotationItems: annotations) {
            MapPin(coordinate: $0.coordinate)
        }
        .frame(width: 400, height: 300)
    }
}

解决方案 #

你可以通过在地图标注的闭包中添加条件判断，控制仅当地图的纬度和经度跨度都≤0.1时才渲染MapPin，否则返回空视图。修改后的代码如下：

struct City: Identifiable {
    let id = UUID()
    let name: String
    let coordinate: CLLocationCoordinate2D
}

struct ContentView: View {
    @State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 51.507222, longitude: -0.1275), span: MKCoordinateSpan(latitudeDelta: 10, longitudeDelta: 10))

    let annotations = [
        City(name: "London", coordinate: CLLocationCoordinate2D(latitude: 51.507222, longitude: -0.1275)),
        City(name: "Paris", coordinate: CLLocationCoordinate2D(latitude: 48.8567, longitude: 2.3508)),
        City(name: "Rome", coordinate: CLLocationCoordinate2D(latitude: 41.9, longitude: 12.5)),
        City(name: "Washington DC", coordinate: CLLocationCoordinate2D(latitude: 38.895111, longitude: -77.036667))
    ]

    var body: some View {
        Map(coordinateRegion: $region, annotationItems: annotations) { city in
            // 判断地图跨度是否满足显示标注的条件
            if region.span.latitudeDelta <= 0.1 && region.span.longitudeDelta <= 0.1 {
                MapPin(coordinate: city.coordinate)
            } else {
                // 不满足条件时返回空视图，不渲染标注
                EmptyView()
            }
        }
        .frame(width: 400, height: 300)
    }
}

关键说明 #

• 核心逻辑是通过region.span.latitudeDelta和region.span.longitudeDelta获取当前地图的跨度，判断两者是否同时≤0.1；
• 若满足条件则渲染MapPin，否则返回EmptyView()实现标注隐藏；
• 如果你希望只要任意一个跨度≤0.1就显示标注，可以把判断条件改为region.span.latitudeDelta <= 0.1 || region.span.longitudeDelta <= 0.1，根据实际需求调整即可。

内容的提问来源于stack exchange，提问作者Василий Старцев