SwiftUI地图标记点Annotation

Annotation 是 SwiftUI 和 MapKit 提供的一种在地图上标记位置的方式。与 Marker 类似，它用于在地图上展示特定位置，但更灵活，可以自定义样式、内容和交互。

Annotation 的作用

用于在地图上标注位置。

提供比 Marker 更高级的自定义能力，例如完全控制外观和行为。

适合需要自定义复杂标记内容的场景，比如图像、按钮、文本等组合。

Annotation 的初始化

Annotation 是一种 MapKit 内容，你可以通过 SwiftUI 的 Map 闭包传入它来定义地图上的标注。

基本初始化

Annotation 有多个构造器，常见的用法如下：

Annotation(
    "Identifier",  // 标注的唯一标识符
    coordinate: CLLocationCoordinate2D(latitude: 51.501, longitude: -0.141)
) {
    // 自定义内容
    VStack {
        Image(systemName: "star.fill")
            .foregroundColor(.yellow)
        Text("Buckingham Palace")
    }
}

Annotation 的使用示例

1、在地图上添加多个标注

import SwiftUI
import MapKit

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

struct ContentView: View {
    let locations = [
        Location(name: "Buckingham Palace", coordinate: CLLocationCoordinate2D(latitude: 51.501, longitude: -0.141)),
        Location(name: "Tower of London", coordinate: CLLocationCoordinate2D(latitude: 51.508, longitude: -0.076))
    ]
    
    var body: some View {
        Map {
            ForEach(locations) { location in
                Annotation(location.name, coordinate: location.coordinate) {
                    VStack {
                        Image(systemName: "mappin.circle.fill")
                            .foregroundColor(.red)
                        Text(location.name)
                            .font(.caption)
                            .padding(4)
                            .background(Color.white)
                            .cornerRadius(8)
                    }
                }
            }
        }
        .edgesIgnoringSafeArea(.all)
    }
}

2、添加交互的标注

可以为 Annotation 中的内容添加按钮或手势来实现交互功能。

Annotation("Tower of London", coordinate: CLLocationCoordinate2D(latitude: 51.508, longitude: -0.076)) {
    VStack {
        Button(action: {
            print("Annotation tapped!")
        }) {
            Image(systemName: "star.fill")
                .foregroundColor(.blue)
        }
        Text("Tap Me!")
            .font(.caption)
    }
}

Annotation修饰符

annotationTitles

在 SwiftUI 中，annotationTitles(.hidden) 是地图的一个修饰符，用于控制地图上标注的标题（Annotation 的标题部分）的可见性。

annotationTitles(.hidden) 的作用

它允许你隐藏或显示 Annotation 的标题。

默认情况下，地图上 Annotation 会自动显示与标注相关联的标题（例如 Marker 或 Annotation 的名称）。

使用此修饰符可以自定义是否显示这些标题。

.annotationTitles(.hidden)

可选值

.hidden：隐藏标题。

.automatic：系统决定是否显示标题，通常基于交互或缩放级别等。

.visible：始终显示标题。

与 MapKit 的 MKAnnotation 的关系

在 UIKit 中，MKAnnotation 是地图标注的核心接口。

在 SwiftUI 中，Annotation 是对 MKAnnotation 的封装，便于与 SwiftUI 的声明式语法结合。

如果需要更高级的自定义（如手动绘制内容或与原生 MapKit API 交互），仍可以直接使用 MKAnnotation。

总结

Annotation 提供了在地图上显示标记和自定义内容的能力。

它比 Marker 更灵活，可以满足更复杂的 UI 和交互需求。

使用时结合 Map 闭包可以直观地展示数据，同时保持 SwiftUI 的声明式编程风格。

相关文章

SwiftUI地图标记点Marker：https://fangjunyu.com/2024/11/22/swiftui%e5%9c%b0%e5%9b%be%e6%a0%87%e8%ae%b0%e7%82%b9marker/