深入探索 MapKit

深入探索 MapKit

了解 MapKit 和 MapKit JS 的最新更新。我们将介绍一种新的路线类型——骑行路线，并向你展示如何在网页上启用 3D 环视图像。了解新的 Geocoding API 如何支持坐标与地址之间的转换，以及如何使用 Address Representations API 来获取某一区域最恰当的地址。最后，我们将介绍一种新的地点引用方式，确保你的 App 能与 App Intents 无缝协作。

章节
- 0:00 - 简介
- 0:45 - 查找地点
- 9:34 - 显示地点
- 14:14 - 畅行四方
资源
相关视频

WWDC24
- 使用 MapKit 充分优化位置相关功能
WWDC23
- 认识 SwiftUI 版 MapKit
WWDC22
- MapKit 的新功能
大家好我叫 Alex 是 MapKit 团队的一名工程师借助 Apple 地图你可以从自己的设备上导航和探索世界各地的不同地点这里有很多值得探索的地方从历史地标到舒适的咖啡馆、当地商店和绝佳的徒步路线今天我将介绍 MapKit 和 MapKit JS 的更新这些更新可让你将地图世界带入你的 App 和网站我将先介绍 PlaceDescriptor 这是一种查找和引用地点的新方法然后我将介绍地理编码以及如何使用它来展示关于某个地点的信息最后我将演示如何通过 Directions 和 Look Around API 将用户带到要去的地方我将从查找和引用地点开始去年我们推出了一种用来引用地点的标识符适用于 MapKit 框架中由地图项表示的地点以及 MapKit JS 中由地点对象表示的地点引用是唯一的而且能够随时间推移保持有效状态每当地图团队更新某个地点的数据例如网站 URL 使用地点 ID 的 App 就能显示这些更新信息由于这些标识符是唯一的因此 App 可以用它们作为自身数据结构中的键标识符可以持久保存和共享 Apple 会持续追踪数据而你可以随时引用这些数据如果你想持久引用通过 MapKit 找到的特定地点地点标识符仍然是最佳选择但在某些情况下它可能并非最合适的有时即使没有标识符你仍会希望能够找到特定地点的 MapKit 丰富数据例如如果你有一个 Web API 或 CRM 可以为你提供所有营业地点的名称和地址或者比如你有特定地点的名称和坐标但你想获得确切的单个地址那么会返回多个结果的 API 如 Local Search 就不是最佳选择还有些时候我想将地点引用添加到非自有代码中或从非自有代码传出或许我想提供来自框架的地点或当我使用 App Intents 时我可能想接收某个地点作为意图参数、返回某个地点作为意图结果或将地点作为属性添加到我的 App 实体上在这些情况下你进行交互的那些 App 可能根本不使用 MapKit 我可以传递像 CLLocation 这样的纯地理表示但却无法通过这种方式像使用 MapKit 标识符那样找到丰富的兴趣点数据为了解决这些情况我们引入了一个新类型： PlaceDescriptor 它位于新的 GeoToolbox 框架中 PlaceDescriptor 允许你提供以结构化方式描述地点的信息
然后 MapKit 或其他地图服务提供商就可以使用 PlaceDescriptor 来尝试查找有关这个地点的丰富数据 PlaceDescriptor 包含三种顶层信息：一个名为 commonName 的字符串在构建 PlaceDescriptor 时你应该提供众所周知的名称例如古根海姆博物馆或悉尼歌剧院这个字段不适用于隐私数据例如“妈妈家” 添加隐私数据无法帮助 MapKit 找到你的地点
PlaceDescriptor 还包含 representations 数组这些表示采用常见格式任一款处理地理信息的 App 或框架应该都能理解其中有三种类型的 PlaceRepresentation 可供选择第一个是 address 字符串就像你写在信封上的地址那样提供的地址信息越详尽 MapKit 找到你的地点的可靠性就越高第二个是 coordinate 表示那些位置固定且明确的地点比如一个已知的地标或营业地点最后是 deviceLocation 可接受 CLLocation 类型的对象这适用于处理接收到的 GPS 数据并且可能包含额外信息如精确度、时间戳、方向或速度 representations 数组必须至少包含一个表示并且按优先级降序排列例如如果 PlaceDescriptor 来自通讯录应用程序坐标可能来自这个地点的地址在这种情况下地址会显示在最前面因为它是原始信息来源坐标将随后显示最后 PlaceDescriptor 包含 supportingRepresentations 数组这些表示可能并非对所有应用程序都可用而且也不是必需的 supportingRepresentations 数组可以为空稍后我会详细讨论可将哪些信息添加到 supportingRepresentations 为了演示 PlaceDescriptor 以及即将推出的所有其他新 API 我将为大家演示一个示例 App 这款 App 旨在帮助喷泉迷们查找世界各个角落的喷泉我想先收集都柏林的一些值得参观的喷泉并将它们标注在地图上
自从 SwiftUI 版 MapKit 推出以来我已经可以在地图上用坐标创建一个简单标记但我希望这款 App 能够结合所有其他 MapKit API 充分利用 Apple 地图为这些喷泉提供的丰富数据虽然我没有地点 ID 这就是使用 PlaceDescriptor 的绝佳机会让我们创建一个 PlaceDescriptor 来引用这个喷泉首先导入 GeoToolbox 我知道在这个坐标处有一个喷泉因此在我创建 PlaceDescriptor 时我将一并提供坐标表示最后我知道这个喷泉叫 Anna Livia Fountain 我也会提供这个名称这就是创建有效的 PlaceDescriptor 需要执行的全部操作然后我可以导入 MapKit 并使用我的 PlaceDescriptor 创建地图项请求创建好请求后我可以执行它来获取这个地点的 MKMapItem 地图项是 MapKit 中的地点的核心类型我可以将它与各种 API 搭配使用
例如接下来我可以在地图上使用地图项你会注意到标记显示了名称、颜色和 Apple 地图为这个地点提供的图标
让我们在地图上添加第二个地点这次改为使用地址来创建我的描述符我只需要提供就我所知这个喷泉最完整的地址版本然后我可以用这个地址和温泉的名称创建 PlaceDescriptor 我按照之前的操作使用 MKMapItemRequest 然后将它和我的另一个喷泉添加到地图上就是这么简单我已经展示了 PlaceDescriptor 的强大功能通过名称以及坐标和地址 PlaceRepresentation 查找地点但还有一个 PlaceDescriptor 顶层属性可供你使用这是一种补充表示方式： serviceIdentifiers serviceIdentifier 表示是一个词典其中的键是给定地图服务的套装标识符值是这个地图服务用来表示你的地点的标识符
例如如果我知道某个地点的 MapKit 地点标识符我可以创建一个词典其中键是 com.apple.MapKit 值就是这个标识符然后我创建一个 serviceIdentifiers 表示并将这个表示传递给 PlaceDescriptor 构造器的 supportingRepresentations 参数如果我从其他地图服务提供商处得知了某个地点的标识符我可以在这里提供 MapKit 并不会使用其他标识符但提供这些标识符在 App Intents 等场景中非常有用你可以将 PlaceDescriptor 提供给另一个可能不使用 MapKit 的 App 你可以根据需要提供任意数量的标识符如果你使用的是 MapKit API 我们始终会正确处理 serviceIdentifiers 如果存在 MapKit 标识符 MKMapItemRequest 将使用它从你的 PlaceDescriptor 获取地点信息如果没有 MapKit 标识符或者如果因任何原因导致无法使用提供的标识符则会使用 PlaceDescriptor 上的其他表示来查找你的地点同样如果使用通过其他方式获得的地图项创建 PlaceDescriptor 我们将确保 PlaceDescriptor 填充了你需要的所有表示包括标识符我将使用 PlaceDescriptor 和 MKMapItemRequest 将我知道的其余都柏林喷泉添加到 App 中用 PlaceDescriptor 请求的地图项可结合我们所有的 MapKit API 使用以显示丰富的地图数据就像通过标识符或 MKLocalSearch 获取的数据一样
例如地点卡为 PlaceDescriptor 请求的地点显示地点卡时我们可以显示最新的丰富数据比如营业时间以及指向 Apple 地图的链接只需一行代码当用户在我的 App 中选择喷泉时我就能显示地点卡地点卡可以在你的 App 中轻松显示某个地点的大量相关信息请观看 WWDC 2024 讲座“使用 MapKit 充分优化位置相关功能” 进一步了解
说到地点卡今年 MapKit JS 中的地点卡也提供指向 Apple 地图的通用链接在安装了“地图”App 的设备上链接会在“地图”中打开对于没有安装“地图”App 的设备地点卡会链接到 maps.apple.com 去年夏天我们推出了这个网站的公开 Beta 版现在当你的 App 和网站链接到 Apple 地图时即使非 Apple 平台上的用户也可以用网页版“地图”进一步探索 iOS 18.4 推出后我们更新了 “地图”处理 URL 的方式让你可以放心创建类似的通用链接例如这个用于执行搜索的 URL 我们让参数变得更一致、更简单、更易于读取
我们还添加了许多其他参数以链接到“地图”App 中的更多功能请务必观看视频相关材料中提供了链接的 “采用统一的地图 URL” 这样你就能在自己的 App 中采用通用地图链接
我已经找到了我的地点接下来我将向大家展示如何使用地理编码和地址表示在 App 中显示更多关于地点的信息
如果你还不熟悉正向地理编码是指获取地址并找到它所引用的坐标的过程举例来说轻点“通讯录”App 中的某个地址可以跳转到某个地图
反向地理编码则相反是由你提供坐标而我们给你一个地址例如当你在“地图”App 中放置图钉时我们会显示这个地点的地址信息
在 iOS 18 及更早版本中你会使用 CoreLocation 来执行地理编码任务今年我们将弃用 CLGeocoder、软弃用 CLPlacemark 并将地理编码引入 MapKit
在我的 App 中我还希望记录我已找到并拍摄了出色构图美照的喷泉这些照片包含地理标记其中有拍摄照片的坐标但我没有任何补充信息比如名称这意味着我无法使用 PlaceDescriptor 查找丰富地点数据我只有坐标因此我将在 MapKit 中使用反向地理编码来查找更多背景信息并显示在我的照片旁边
让我们对我的第一张喷泉照片进行反向地理编码
我会先输入所拍照片的坐标然后使用这个位置发出 MKReverseGeocodingRequest 请求不同于我之前展示的使用 PlaceDescriptor 发出的 MKMapItemRequest MKReverseGeocodingRequest 的构造器会返回一个可选值如果你提供的 CLLocation 的坐标无效 MapKit 将无法为你执行请求当请求返回时我得到一个地图项数组对于大多数地理编码请求这个数组应仅包含一个条目所以我选择第一个请注意由于这个地图项来自 Geocoding API 它不会包含兴趣点的丰富信息这个地图项仅包含这个地址点的相关信息获得了地图项后可以显示地址了
我将使用 MKReverseGeocodingRequest 以获取其余照片的地址并以列表形式展示我的 App 已初具雏形了但我感觉在这个界面显示完整地址可能过于冗余了所以我会看看其他可选项 MKMapItem 提供了两个处理地址信息的可选属性
首先是 MKAddress 当你创建自己的 MKMapItem 时可以实例化你的 MKAddress 在从 Geocoding、Local Search 和 PlaceDescriptor Resolution 等 API 返回 MapItem 时 MapKit 还会提供一个 MKAddress 其次是 MKAddressRepresentations 它没有构造器地址表达仅适用于从 MapKit API 返回的地图项
我先介绍 MKAddress 它有两个字符串属性 fullAddress 和 shortAddress
fullAddress 是我们提供的邮政地址或行政地址的最完整版本而 shortAddress 只提供最重要的部分
在某些情况下我们提供的地址可能非常简短例如海洋中坐标的反向地理编码可能只有一行
当你实例化自己的地图项时地址属性会用于 MapKit 地点卡中以便你显示自定地址信息
虽然 MKAddress 提供地址的简单版本 MKAddressRepresentations 提供了许多在 App 中显示地址信息的强大方式例如如果你想显示完整地址列表但这些地址都在同一国家/地区你可能需要在 App 用户界面中省略地区为此你可以使用完整地址将 includingRegion 设为 false 或者你也许想列出城市以及关于城市所在地区的一些额外背景信息有时你想提供一个州或省比如加利福尼亚州的洛杉矶而有时你会希望添加国家/地区如法国巴黎 MapKit 大大简化了这一过程因为它能够根据提供的地址以及地图项请求设备的语言与地区信息匹配最适合的选项深入了解我的 App 可用的不同地址表示之后我将选择“cityWithContext” 让照片附带的地址信息更加简洁现在 App 展示信息的详细程度恰到好处视觉效果也很棒
用于正向地理编码的 API 与反向地理编码非常相似使用 MKGeocodingRequest 我可以返回一个地图项这次是针对地址的这使得访问坐标或将它添加到地图变得非常容易它还包括我们刚讨论的所有地址信息选项这样我就可以获得在发出地理编码请求之前无法获取的多种地址显示表示
现在我已经找到了我的地点并显示了关于这些地点的一些信息接下来我将向大家展示 MapKit API 来帮助你导航到地点 MapKit 提供了 Directions API 可以查找通过步行或驾车等多种交通方式往返于出发地与目的地之间的路线 Directions 会提供估算的行程时长和距离以及详细的逐步导航信息
回到我的都柏林地图视图我想规划一下前往精选喷泉的路线我将通过在 Maps 构造器中提供地图项绑定在我的地图中启用选择这样当所选项发生变化时我可以计算我的路线有关如何处理地图选择的更多信息请观看 WWDC 2023 的 “认识 SwiftUI 版 MapKit” 要获取我的路线我首先要创建一个路线请求然后将设备的当前位置设置为出发地并将所选地图项设置为目的地接下来创建一个 directions 对象最后计算路线我会确保处理任何错误然后会处理响应但路线请求的响应中有哪些内容？
我们会返回为你的路线匹配的出发地和目的地返回信息可能与你在请求中提供的略有不同例如驾车路线可能会考虑停车地点而步行路线可能会将你直接带到建筑物门口
我们还包含一个数组其中包含一条或多条满足你请求的路线
路线包含许多有用的信息包括可用作路线标题的本地化名称、道路封闭等一系列沿途路况通知、以米为单位的行程距离、这条路线的预计用时以及可在地图上绘制的路线几何形状
很高兴告诉大家今年我们为 MapKit 添加了对骑行路线指引的支持对于我的 App 而言骑行是观赏都柏林喷泉的绝佳方式只需在我的路线请求中修改一个属性即可实现我想为我的路线显示一条可能的骑行路线我将采用响应的第一条路线然后使用 MapPolyline 将它添加到地图中显示骑行路线指引就是这么简单
MapKit 的骑行路线功能非常强大这项功能会利用驾车时无法通行的小径和小道并忽略某些不适合骑自行车的道路你还可以使用 MapKit JS 获取骑行路线指引和预计到达时间就像使用 Swift 一样我只需在现有路线请求中添加一行配置将骑行指定为交通类型
我还很高兴告诉大家有史以来第一次你可将 MapKit 的路线指引功能带到自己的 watchOS App 了！实际上随着最新 watchOS SDK 推出 Apple Watch 上现已支持超过 20 个 MapKit API
现在我已经为我的喷泉之旅规划了一条不错的骑行路线如果能在出发前探探路骑行时我就会感到更踏实了通过启用“地图”的四处看看功能我可以获得城市的 360 度交互式街景图并能轻松预览道路、自行车道、停车场和地标
我们在 iOS 16 中将“四处看看” 引入了 MapKit App 包括用于查看图像是否位于给定位置、预览四处看看图像和全屏显示的 API 要了解详情请观看 WWDC22 讲座 “MapKit 的新功能”
今年我们在 MapKit JS 中引入 “四处看看”功能以便你在自己的网站或网页端应用程序中启用它你可以添加两种类型的 “四处看看”视图
首先是交互式“四处看看” 通过这个视图你能在自己的 UI 中嵌入用户可浏览的环视视图其次是“四处看看”预览这种视图会提供所需位置图像的静态快照点按预览会启动全屏交互式体验要向网站添加交互式“四处看看” 我需要先添加 place 对象我可以使用任何能够返回地点的 MapKit JS API 例如 PlaceLookup Search 或 Geocoding 在这个示例中我有一个标识符因此我将使用 PlaceLookup 然后我会创建 lookAround 对象传入包含的 DOM 元素以及 place 对象最后是 options 词典 “四处看看”视图支持三个选项第一个是 openDialog 如果这个选项为 true “四处看看”视图将覆盖整个浏览器窗口第二个是 showsDialogControl 如果为 true 则“四处看看”视图中会显示一个按钮允许你进入和退出全屏窗口体验最后是 showsCloseControl 如果为 true 则会添加一个按钮用于关闭“四处看看”视图 MapKit JS 会发送与 “四处看看”视图相关的各种事件你可以添加事件侦听器来响应或覆盖默认行为例如当用户轻点关闭按钮时将发送 close 事件你可以使用这个回调来执行动画或在 App 中有意义的状态更改
如果不取消这个事件的默认操作 lookAround 视图会从 DOM 中删除你可能需要处理的其他事件包括：视图完全载入时发送的 load 事件出现问题时发送的 error 事件例如当图像不可用时或当浏览器无法显示视图时 MapKit JS 提供了一个错误 UI 但你可能希望自定错误或回退体验最后 lookAround 还会发送 readystatechange 事件你可将它用于监控视图的生命周期 readyState 会随着视图载入、完成加载、出现错误或从 DOM 中删除而发生变化除了“四处看看”视图你可以用 LookAroundPreview API 来实现更简洁的体验 “四处看看”预览不是交互式的用户无法平移视图点按“四处看看预览”会启动全屏窗口环视体验适用于 MapKit JS 的“四处看看” 定会将你的网站提升到全新境界以上就是本次讲座的全部内容这可真是一次“知识的喷涌”！我向你展示了如何使用 MapKit 和 MapKit JS 查找地点、显示地点信息和导航到世界各地的地点
结束之前我给大家布置一些作业使用 PlaceDescriptor 查找具有和不具有标识符的地点并将地点引用发送到其他 App 更新指向 Apple 地图的所有链接以使用新的统一 URL 格式
将 App 从 CoreLocation 迁移到 MapKit API 以进行地理编码并利用我们出色的地址表示最后将骑行路线指引和 “四处看看”添加到你的 App 中帮助用户去到要去的地方
感谢大家今天抽出时间了解 MapKit！

4:49 - Putting Marker on the Map with a coordinate

// Putting Marker on the Map with a coordinate

let annaLiviaCoordinates = CLLocationCoordinate2D(
    latitude: 53.347673,
    longitude: -6.290198
)
var body: some View {
    Map {
       Marker(
            "Anna Livia Fountain",
            coordinate: annaLiviaCoordinates
        )
    }
}

5:07 - Creating and resolving a PlaceDescriptor with coordinate PlaceRepresentation

// Creating and resolving a PlaceDescriptor with coordinate PlaceRepresentation

import GeoToolbox
import MapKit

let annaLiviaCoordinates = CLLocationCoordinate2D(
    latitude: 53.347673,
    longitude: -6.290198
)
let annaLiviaDescriptor =  PlaceDescriptor(
    representations: [.coordinate(annaLiviaCoordinates)],
    commonName: "Anna Livia Fountain"
)

let request = MKMapItemRequest(placeDescriptor: annaLiviaDescriptor)
do {
    annaLiviaMapItem = try await request.mapItem
} catch {
    print("Error resolving placeDescriptor: \(error)")
}

5:56 - Creating and resolving a PlaceDescriptor with address PlaceRepresentation

// Creating and resolving a PlaceDescriptor with address PlaceRepresentation

import GeoToolbox
import MapKit

let address = "121-122 James's St, Dublin 8"
let descriptor =  PlaceDescriptor(
    representations: [.address(address)],
    commonName: "Obelisk Fountain"
)

let request = MKMapItemRequest(placeDescriptor: descriptor)
do {
    obeliskFountain = try await request.mapItem
} catch {
    print("Error resolving placeDescriptor: \(error)")
}

6:45 - Creating a PlaceDescriptor with identifiers

// Creating a PlaceDescriptor with identifiers

import GeoToolbox

let annaLiviaCoordinates = CLLocationCoordinate2D(
    latitude: 53.347673,
    longitude: -6.290198
)
let identifiers = ["com.apple.MapKit" : "ICBB5FD7684CE949"]
let annaLiviaDescriptor =  PlaceDescriptor(
    representations: [.coordinate(annaLiviaCoordinates)],
    commonName: "Anna Livia Fountain",
    supportingRepresentations: [.serviceIdentifiers(identifiers)]
)

7:28 - Fetching a MapItem from a PlaceDescriptor

// Fetching a MapItem from a PlaceDescriptor

let request = MKMapItemRequest(placeDescriptor: descriptor)
let mapitem = try await request.mapItem

7:43 - Getting a PlaceDescriptor from a MapItem

// Getting a PlaceDescriptor from a MapItem

let descriptor = PlaceDescriptor(mapItem: mapitem)

8:10 - Place Card

// Place Card

var body: some View {
    Map {
        ForEach(fountains, id:\.name) { fountain in
            Marker(item: fountain)
                .mapItemDetailSelectionAccessory(.callout)
        }
    }
}

10:45 - Reverse geocode with MapKit

// Reverse geocode with MapKit

import MapKit

let millCreekCoordinates = CLLocation(latitude: 39.042617, longitude: -94.587526)
if let request = MKReverseGeocodingRequest(location: millCreekCoordinates) {
    do {
        let mapItems = try await request.mapItems
        millCreekMapItem = mapItems.first
    } catch {
        print("Error reverse geocoding location: \(error)")
    }
}

13:50 - Forward geocoding with MapKit

// Forward geocoding with MapKit

var body: some View {
    Map {
        if let mapItem {
            Marker(item: mapItem)
        }
    }
    .task {
        let request = MKGeocodingRequest(
            addressString: "1 Ferry Building, San Francisco"
        )
        do {
            mapItem = try await request?.mapItems.first
        } catch {
            print("Error geocoding location: \(error)")
        }
    }
}

14:38 - Allowing Map Selection

// Allowing Map Selection

@State var selectedItem: MKMapItem?

var body: some View {
    Map(selection: $selectedItem) {
       UserAnnotation()
       ForEach(fountains, id: \.self) { item in
          Marker(item: item)
       }
    }
    .onChange(of: selectedItem) {
       // Compute Route
    }
}

15:00 - Fetch a route

// Fetch a route

let request = MKDirections.Request()
request.source = MKMapItem.forCurrentLocation()
request.destination = selectedItem
let directions = MKDirections(request: request)
do {
    let response = try await directions.calculate()
    returnedRoutes = response.routes
} catch {
    print("Error calculating directions: \(error)")
}

16:06 - Fetch a cycling route

// Fetch a cycling route

let request = MKDirections.Request()
request.source = MKMapItem.forCurrentLocation()
request.destination = selectedItem
request.transportType = .cycling
let directions = MKDirections(request: request)
do {
    let response = try await directions.calculate()
    returnedRoutes = response.routes
} catch {
    print("Error calculating directions: \(error)")
}

16:25 - Display a route on the Map

// Display a route on the Map

Map {
    if let mapRoute {
        UserAnnotation()
        MapPolyline(mapRoute)
            .stroke(Color.blue, lineWidth: 5)
    }
}

16:40 - Cycling directions in MapKit JS

// Cycling directions in MapKit JS

let directions = new mapkit.Directions();
directions.route ({
    origin: safariPlayground,
    destination: cherryHillFountain,
    transportType: mapkit.Directions.Transport.Cycling
}, (error, { routes: [{ polyline }] }) => {
    polyline.style.lineWidth = 5;
    map.showItems([
        new mapkit.PlaceAnnotation(place),
        new mapkit.PlaceAnnotation(
          place2,
          { selected: true }
        ),
        polyline
    ]);
});

17:26 - Look Around

// Look Around

var body: some View {
    Map {
        ForEach(fountains, id:\.name) { fountain in
            Marker(item: fountain)
       }
    }
    .overlay(alignment: .bottomLeading) {
        if (lookAroundScene != nil) {
            LookAroundPreview(scene: $lookAroundScene)
                .frame(width: 230, height: 140)
                .cornerRadius(10)
                .padding(8)
        }
    }
}

18:10 - Look Around View in MapKit JS

// Look Around View in MapKit JS

const placeLookup = new mapkit.PlaceLookup();
const place = await new Promise(
    resolve => placeLookup.getPlace(
        "IBE1F65094A7A13B1",
        (error, result) => resolve(result)
    )
);

// Create an interactive look around view.
const lookAround = new mapkit.LookAround(
    document.getElementById("container"),
    place,
    options
);

18:35 - Look Around Options

// Look Around Options for MapKit JS

const options = {
    // Enters a full window experience
    // immediately on load
    openDialog: true,
    
    // Provides a button to enter and
    // exit full window.
    showsDialogControl: true,
    
    // Provides a button to destroy
    // the look around view.
    showsCloseControl: true,
};

19:10 - Handle MapKit JS Look Around events

// Handle MapKit JS Look Around events

lookAround.addEventListener(
    "close",
    event => {
        app.closeView();
        event.preventDefault();
    }
);

lookAround.addEventListener(
    "load",
    event => app.fadeInView()
);

lookAround.addEventListener(
    "error",
    event => app.fadeOutView()
);

lookAround.addEventListener(
    "readystatechange",
    event => console.log(lookAround.readyState)
);

20:01 - MapKit JS Look Around Preview

// MapKit JS Look Around Preview

const lookAround = new mapkit.LookAroundPreview(
    document.getElementById("container"),
    place
);

- 0:00 - 简介
- 用户可以使用 Apple 地图导航和探索全球各地的地点，包括地标、咖啡馆、商店和徒步路线。通过 MapKit 和 MapKit JS 平台，你可以将这些地图功能集成到你的 App 和网站中。最近的更新包括用于查找和引用地点的“PlaceDescriptor”、用于显示地点信息的增强地理编码，以及用于提供导航帮助的 Directions API 和 Look Around API。
- 0:45 - 查找地点
- 新的 GeoToolbox 框架提供“PlaceDescriptor”类型。使用“PlaceDescriptor”以结构化信息表示地点，例如，通用名称、地址、坐标或设备位置。当你没有某个地点的唯一 MapKit 地点 ID 时，这种类型非常有用，比如在处理来自外部 API 或 CRM 的数据时，或者将地点引用传递给不使用 MapKit 的代码时。通过“PlaceDescriptor”，MapKit 或其他地图服务提供商能够查找有关指定地点的丰富数据。“PlaceDescriptor”中的 representations 数组按优先级降序排列，最准确的信息显示在最前面，从而帮助确保最精确的位置识别。可以通过多种方法创建“PlaceDescriptor”，例如，指定坐标、地址或服务标识符。服务标识符是一个字典，它将捆绑标识符映射到特定地图服务中的唯一地点标识符。这能在不同地图服务之间实现灵活性和互操作性。当你使用“PlaceDescriptor”创建“MKMapItemRequest”时，MapKit 会优先使用服务标识符中的 MapKit 标识符 (如有)。如果没有，它将回退到坐标或地址等其他表示形式来获取该地点。借助“PlaceDescriptors”，你能够轻松地向地图添加地点，显示包含丰富信息的地点卡，并创建指向 Apple 地图的通用链接，从而在不同设备和平台上提供流畅的用户体验。
- 9:34 - 显示地点
- 在 iOS 18 中，地理编码过程已集成到 MapKit 中，取代了已弃用的 CoreLocation 类“CLGeocoder”和“CLPlacemark”。地理编码涉及两个主要过程：正向和反向。正向地理编码将地址转换为坐标，而反向地理编码则相反，它接收坐标并提供地址。新的 MapKit API 允许你使用“MKReverseGeocodingRequest”发起反向地理编码请求，这个请求会返回地图项数组，通常只包含特定位置的一个条目。使用“MKAddress”和“MKAddressRepresentations”来显示地址信息。“MKAddress”提供简单的完整和简短地址字符串，而“MKAddressRepresentations”提供更大的灵活性，允许你根据语言区设置和 App 的特定需求等因素自定地址显示，从而实现更简洁、对用户更友好的位置数据显示。
- 14:14 - 畅行四方
- MapKit 提供了一个 Directions API，使用户能够通过各种交通方式 (包括步行、驾车和现在新增的骑行) 查找不同地点之间的路线。这个 API 提供详细的路线信息，例如时间和距离的估算、分步说明以及在地图上绘制的路线几何形状。你可以创建路线请求、设置出发地和目的地以及计算路线。响应包括匹配的出发地和目的地位置、一条或多条路线以及道路封闭等相关通知。 MapKit 还扩展为包括 watchOS 和 MapKit JS 上的骑行路线指引支持，让用户可以在手表和网站上规划骑行路线。此外，“地图”中可提供 360 度街道级图像的“四处看看”功能已引入 iOS 16 中的各款 MapKit App，而且现已在 MapKit JS 中提供，让你能够使用交互式街景来增强 App 的功能。

章节

资源

相关视频

WWDC24

WWDC23

WWDC22