Swift Academy · 课时

在 SwiftUI 中显示地图

Q: 「在 SwiftUI 中显示地图」这节课中我会学到什么？

使用 Map 显示地图和标注。 你通过在浏览器中直接运行的动手代码来练习 Swift Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 Map 显示地图和标注。

在 SwiftUI 中显示地图 是 CoddyKit 上的免费 Swift Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Swift Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Swift Academy 课程共包含 4 节课。

SwiftUI 地图视图

SwiftUI 提供了原生的 Map 视图（位于 MapKit 中），无需 UIKit 即可显示交互式地图。请导入 MapKit，并将 Map 放入视图层次结构中。从 iOS 17 开始，它使用现代的声明式接口。

import SwiftUI
import MapKit

struct BasicMap: View {
    var body: some View {
        Map()
    }
}

坐标区域

区域由 MKCoordinateRegion 描述：它包含一个中心坐标和一个跨度（表示可见的纬度和经度范围）。跨度越小，缩放距离越近。

let region = MKCoordinateRegion(
    center: CLLocationCoordinate2D(latitude: 41.008, longitude: 28.978),
    span: MKCoordinateSpan(latitudeDelta: 0.05, longitudeDelta: 0.05)
)

使用位置控制相机

现代的 Map 接受一个指向 MapCameraPosition 的绑定。您可以从一个区域或矩形开始，也可以自动将内容纳入视野。使用 .region(...) 设置明确的区域。

struct CityMap: View {
    @State private var position: MapCameraPosition = .region(
        MKCoordinateRegion(
            center: .init(latitude: 41.008, longitude: 28.978),
            span: .init(latitudeDelta: 0.1, longitudeDelta: 0.1)
        )
    )
    var body: some View {
        Map(position: $position)
    }
}

添加标记

Marker 会在指定坐标处放置一个带标题的标准气球图钉。请将标记放在 Map 的尾随闭包中（这是地图内容构建器）。

Map {
    Marker("Hagia Sophia",
           coordinate: .init(latitude: 41.0086, longitude: 28.9802))
}

自定义标记

标记接受 systemImage 和 tint，用于表示不同类别。这样可以让它们在地图上具有明显的视觉区别。

Map {
    Marker("Cafe", systemImage: "cup.and.saucer.fill",
           coordinate: cafeCoord)
        .tint(.brown)
}

使用自定义视图添加注释

当图钉无法满足需求时，Annotation 可以让您在指定坐标处渲染任意 SwiftUI 视图。请提供标题和内容闭包。

Map {
    Annotation("Office", coordinate: officeCoord) {
        Image(systemName: "building.2.fill")
            .padding(6)
            .background(.blue, in: Circle())
            .foregroundStyle(.white)
    }
}

根据数据显示多个图钉

在地图内容构建器中使用 ForEach 遍历模型，以渲染多个标记。每个项目都会提供一个坐标。

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

Map {
    ForEach(places) { place in
        Marker(place.name, coordinate: place.coordinate)
    }
}

显示用户位置

将 UserAnnotation() 添加到地图内容中，即可显示熟悉的蓝点。这要求应用已经获得定位授权。您也可以将它与自己的标记结合使用。

Map {
    UserAnnotation()
    ForEach(places) { p in
        Marker(p.name, coordinate: p.coordinate)
    }
}

地图控件

使用 .mapControls 修饰符附加标准控件：指南针、用户位置按钮和比例尺视图。它们会自动显示，并遵循地图样式。

Map { UserAnnotation() }
    .mapControls {
        MapUserLocationButton()
        MapCompass()
        MapScaleView()
    }

地图样式

使用 .mapStyle 修饰符，在标准、影像（卫星）和混合渲染之间切换。您还可以切换逼真的地形和兴趣点。

Map()
    .mapStyle(.hybrid(elevation: .realistic))

响应相机变化

.onMapCameraChange 修饰符会在可见区域发生变化时报告变化（例如用户平移地图后）。您可以利用它获取新可见区域的数据。

Map(position: $position)
    .onMapCameraChange { context in
        let center = context.region.center
        print("Now centered at:", center.latitude, center.longitude)
    }

快速检查：SwiftUI 地图

测试您对在 SwiftUI 中使用 MapKit 的理解。

回顾：在 SwiftUI 中显示地图

现在您已经可以构建交互式地图：

使用带有 MapCameraPosition 绑定的现代 Map。
放置 Marker，或渲染自定义的 Annotation 视图，并使用 ForEach 遍历数据。
使用 UserAnnotation() 显示蓝点，并添加 .mapControls。
设置地图样式，并使用 .onMapCameraChange 响应相机变化。

常见问题解答

「在 SwiftUI 中显示地图」课时是免费的吗？

是的 — 「在 SwiftUI 中显示地图」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Swift Academy 课程的其余内容，请升级到 CoddyKit PRO。 Swift Academy 课程共包含 4 节课。

「在 SwiftUI 中显示地图」这节课中我会学到什么？

使用 Map 显示地图和标注。你通过在浏览器中直接运行的动手代码来练习 Swift Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Swift Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Swift Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「在 SwiftUI 中显示地图」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Swift Academy 课中编写并运行代码吗？

能。每节 Swift Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Swift Academy