使用 MapKit 充分优化位置相关功能

使用 MapKit 充分优化位置相关功能

探索你可以通过哪些强大的新方式使用 MapKit 和 MapKit JS 将地图整合到 App 和网站中。了解如何使用 Place ID 存储和引用唯一的位置。查看搜索方面的改进，让顾客能够更高效地查找相关位置。了解让你能为位置显示丰富信息的全新 Place Card API，以便顾客能够直接在你的 App 中探索目的地。此外，我们将介绍如何借助简化的令牌预置流程和 Web Embed API，快速将地图嵌入到你的网站中。

章节
- 0:00 - Introduction
- 0:54 - Reference a place
- 6:12 - Display place details
- 12:05 - Find a place
资源
相关视频

WWDC23
- 认识 SwiftUI 版 MapKit
下载

欢迎大家我叫 Mike 大家好我叫 Jeff 我们是 MapKit 工程师今天很高兴与大家探讨 MapKit 框架和 MapKit JS 中适用于网页的一些新功能很多时候地图的主要作用其实就是标识可在地图上找到的地点当你使用“Apple 地图”App 浏览或探索地点时你可以获得全球各地不同地点的大量信息今年 MapKit 新增了一些功能让你能以全新的方式将这些地点引入你的 App 要介绍的内容很多！我们将重点讨论三个主要用例具体来说我们将讨论如何使用标识符引用地点如何在 App 的 UI 中显示地点详情以及如何使用 Search API 增强功能有效查找地点首先我将介绍如何引用地点今年我们引入了地点标识符地点 ID 可用于引用 MapKit 框架中由地图项表示的地点和 MapKit JS 中由地点对象表示的地点使用地点 ID 可以引用各种地点你可以将它用于博物馆、餐厅、公园或学校等兴趣点 App 可以使用它来引用作家在即将举行的新书巡回签售会上要到访的书店引用是唯一的而且能够随时间推移保持有效状态；只要地点存在它们便一同存在图书巡回签售会 App 可能希望为巡回签售会中到访的每家书店提供一个网站链接只要 Apple 更新了书店的数据例如网站 URL 使用地点 ID 的 App 就能显示这些新信息由于这些标识符是唯一的因此 App 可以用它们作为自身数据结构中的键标识符可以持久保存和共享 Apple 会追踪数据你可以随时引用这些数据你刚才告诉我你正在开发的一款 App 使用了我们的许多新功能其中包括地点 ID 你能否向我们展示一下你正在构建的 App？当然可以！我的 App 主要用于在各个地点打卡因此它能够从地点 ID 中获益介绍一下我的 Apple Store 商店打卡程序我喜欢游历各个国家或地区在拥有最难得一见、最耀眼设计的 Apple Store 商店打卡借助地点 ID 我想我可以建立精确的商店索引所有的打卡之旅都必须有一个起点将 Apple Park Visitor Center 作为起始地点再合适不过了为了开始建立索引我需要找到 Visitor Center 的地点 ID 要查找地点 ID 我可以使用现有的 API 如 Search 或 Geocoding 不过我将使用新的地点 ID 查找工具因为这个工具在查找少量 ID 时速度更快我首先前往 developer.apple.com/cn/maps 并点按右上角的“资源”链接在“资源”页面我可以向下滚动并找到“地点 ID 查找”！
在这里我可以轻松搜索 Apple Park Visitor Center 或者直接在地图上轻点这个地点查看它的地点 ID 太好了！现在我获得了这个 ID 我想在我 App 中的地图上显示这个地点只需几行代码我就能做到！这就是我用来显示 Apple Park Visitor Center 的代码在这里我使用从查找工具中获得的地点 ID 创建了一个标识符这个标识符用于通过异步请求获取地图项 App 直接显示带有一个标记的地图这个标记包含上述项通过使用地点 ID 而不是硬编码坐标我将充分利用 Apple 地图编辑的力量举例来说这意味着如果他们认为地点放错了位置需要移动标记我将继承他们的更改而无需更新我的代码我还可以与我的所有原生 App 和网页内容共享这个地点 ID！这是我用来在网页上创建等同显示效果的 JavaScript 代码首先我创建了一个名为 entryPoint 的函数我会告诉 MapKit JS 在初始化后调用这个函数在这个函数中我把在“地点 ID 查找”网站上找到的 ID 传递给一个新函数这个函数会查找相应地点并将结果发送给我的回调函数在本例中就是 annotatePlace annotatePlace 函数会以这个地点为中心构建一个新地图然后添加一种专门用于显示地点对象的新注释： PlaceAnnotation 接下来我会告诉 MapKit JS 在加载后调用我的 entryPoint 函数今年初始化 MapKit JS 所需的代码比以往任何时候都要少首先我在这个异步 script 标记中添加 MapKit JS src 属性并将我的 entryPoint 函数列为 data-callback 这样 MapKit JS 就会在加载后调用这个函数最后一个属性是 data-token 但这个令牌来自何处？今年我们使用精简的 UI 取代了动态 JWT 生成流程这个 UI 可生成特定于域的令牌字符串在你手动撤销之前这些令牌字符串不会过期我将使用新的令牌预置工具创建一个新令牌！我首先前往 developer.apple.com/cn/maps 并点按右上角的“资源”链接在“资源”页面上我可以向下滚动并找到“创建令牌”
通过点按添加按钮我可以填写简短的表单以创建一个 MapKit JS 生产令牌这个令牌不会过期而且只在我的域中有效创建令牌后如果它不再有效我日后可以返回这里将它撤销在此基础上我可以将令牌直接拷贝到我的 script 标记中而不必考虑过期日期、动态 JWT 生成或再次调用 mapkit.init 看起来我已经做好准备能够在我的 App 和网页上展示我的 Apple Store 商店新手引导工具了你的 App 有了良好的开端！能够在 App 和网站上使用同一标识符来引用单个 Apple Store 商店这项功能非常有用使用地点 ID 你可以实现许多可能要进一步了解如何使用这项技术来构建和维护你自己的地点 ID 集合请观看本讲座相关资源中的链接： “使用地点 ID 标识唯一地点” 使用地点 ID 你能够获取自己所关注地点的最新信息接下来将介绍什么主题呢？在你的 App 或网站中显示地点信息当你使用“地图”App 轻点某个地点时将显示地点卡地点卡显示开放时间、电话号码等信息今年 MapKit 为你的 App 和网站带来了地点卡功能可使用新的 SelectionAccessory API 来实现一种效果即每当在地图上选择某个地点时都能显示地点信息信息可以全面铺陈以详尽呈现也可以紧凑编排
以节省空间甚至仅显示一个链接以供在“地图”App 中查看地点你可以根据自己的用例选择最适合的样式或者直接使用默认的自动样式让 MapKit 选择最适合平台和地图视图尺寸的样式即使你的 App 或网站没有地图视图你也可以显示地点卡 MapItemDetail API 和 PlaceDetail API 非常灵活并支持多种用例最后嵌入是将地图添加到网站的快捷方式开发者网站上的 “创建地图”工具可以直接生成 HTML 供你拷贝并粘贴 Mike 在他的 App 中引入了地点卡给我们展示一下你的成果吧！当然可以！现在我已经在地图上显示了 Visitor Center 我希望美观地显示关于它的最新信息！这是我 App 中的一个地图其中显示我到访过的所有商店我只需添加一行代码即可！现在当我轻点一家到访过的商店时我的 App 就会显示有关这家商店的大量详细信息美观的地点数据在任何地方都非常有价值让我也更新一下之前的网站吧我修改了之前的 MapKit JS 代码增加了两行第一行创建新的 PlaceSelectionAccessory 第二行将这个附件附加到之前的现成注释现在选择 Apple Park Visitor Center 时会弹出丰富的地点数据如果页面包含多个兴趣点或其他复杂使用模式那么非常适合使用 MapKit JS 显示地点信息但是如果网站只显示单个地点的数据我可以使用 Jeff 提到的新的低代码解决方案：嵌入！由于我的网站目前只显示了一家 Apple Store 商店的详细信息我想知道如何通过嵌入实现相同的功能我首先前往 developer.apple.com/cn/maps 并点按右上角的“资源”链接在“资源”页面上向下滚动并找到“创建地图”
在这里我可以选择新增的“Web Embed”按钮以使用我的地点 ID、开发者令牌等对嵌入式地图进行自定一旦地图呈现我想要的显示效果我就可以快速将生成的 HTML 代码片段拷贝到我的网站这样无需编写任何 JavaScript 代码就能获得美观的地图！显示丰富地点信息的最后一种方式是完全脱离地图环境的有时我需要一个可快速滚动的列表来显示我打卡过的每家商店而不是地图我认为每个列表项都包含地点信息会很有帮助这是我用来显示收藏地点列表的代码首先我显示我收藏的所有商店列表其中每个列表项都会显示对应商店的名称通过这行代码现在轻点列表项时将显示完整的地点卡！我还希望在网页上看到所收藏商店的详情因此我还要更新我的网站在这里我利用了之前的网页代码但是使用几条语句替换了 annotatePlace 函数第一条语句从页面中抓取一个元素第二条语句在这个元素中填入我所查找地点的详情我还使用了新的自适应配色方案它使这些地点详情能够匹配系统偏好的配色方案：浅色或深色现在也可以使用相同的值来创建自适应 MapKit JS 地图我的 App 和网站真的是相得益彰！你觉得呢？它们确实相得益彰！你使用我们的新 API 来显示所打卡商店的地点信息即使你的 App 没有地图视图也可以使用 MapItemDetail API 来显示地点卡 API 适用于 UIKit、 AppKit 和 SwiftUI 通过 MapKit JS 你可以使用 PlaceDetail API 将地点卡作为内容包含在网页中可以使用 SelectionAccessory API 直接在地图中显示地点信息 MapKit 提供的 SelectionAccessory API 可用于各种平台和技术
看着地图上你收藏的所有商店我也想跟随你的脚步到访每家商店我想如果能带上我的女儿让她们挑选第一件 Apple T 恤一定很有意思她们也喜欢愉快地去野餐或许我们可以找个公园随便吃点什么我有个主意使用 SelectionAccessory API 你可以实现对地图上的所有其他地点显示地点卡而不仅仅是 Apple Store 商店我可以在你收藏的每家商店附近轻点一下直到找到一个看起来不错的公园进行野餐这将帮助我选择最适合我们到访的 Apple Store 商店！让我们来看看你的 App 针对代表所收藏商店的每个地图项添加了一个标记在 SwiftUI 中你可以通过使用 MapSelection 支持选择自己的内容和地图自身的地图功能你可以在使用这个修饰符选择地图功能时显示地点卡标注这是开始使用 SelectionAccessory API 的绝佳方法只需在现有 App 代码中为地图功能启用它即可你的 App 可以像以前一样显示注释内容你的顾客可以在地图上进一步了解你的内容附近的地点这种额外的上下文可以带来许多价值现在你知道了如何使用地点 ID 引用地点并使用地点卡显示有用的信息但是具体涵盖哪些地点呢？如果你不是只展示使用地点 ID 查找工具找到的特定地点你可能需要让你的 App 支持搜索地点！今年我们对 Search API 进行了改进包括筛选搜索结果的新方法你可以搜索更多类型的地点比如音乐场所、滑板公园甚至城堡你可以搜索自然地理特征如河流或山脉你甚至可以搜索地址的特定组成部分如城市或邮政编码我们实现了仅搜索特定限定区域的搜索功能这样你就可以只关注相关区域我们还为 Server API 添加了分页功能这样就可以搜索到大量结果事实上可以搜索到数页结果！你认为这些新的搜索功能可以帮助你更有效地查找商店和进行打卡吗？当然了！花了一整天时间在湾区寻找野外 Apple Store 商店后任何打卡者可能都需要喝点浓咖啡才能继续工作！我将在我的网站上使用这些新的搜索功能以确保我可以提前规划以便根据需要随时喝到咖啡然后我将在我的原生 App 中添加相同的功能首先我需要找到 Cupertino 我似乎可以使用新的 AddressFilter 来实现这一点在这里我创建了一个 AddressFilter 以仅搜索地点即大多数国家或地区的城市然后我将这个筛选器插入一个新的 Search 对象最后我使用 Cupertino 一词运行搜索以找到我正在寻找的城市而不必担心可能会找到一家具有以下名称的公司： Cupertino's Classy Cleaners 与 Cupertino 匹配的城市搜索结果会被发送到我设置的 showMap 函数在这个函数中我将第一个搜索结果用于创建区域这个区域将传入新地图这些代码将 Cupertino 作为地图的中心这正是我想要的效果然后我在这个区域中创建一个新的搜索即搜索咖啡最后我为每个咖啡结果添加一个新的 PlaceAnnotation 现在每个结果都标注在地图上！但还有一个问题当我缩小地图时我发现我在地图中初始视口之外的位置添加了许多注释我真的不需要所有这些距离过远的咖啡店因此我可以使用 RegionPriority 来移除它们只需这一个属性我就可以要求将结果限定在传入搜索的区域内完成这一更改后页面上的结果仅限于原始区域内的结果这些结果仅包括我通过骑行方式可以到达的地方当然原生 App 也可以使用所有这些功能我将以完全相同的方式增强我的 App 在这里我创建了一个视图用于显示每家咖啡店的标记我使用 findCity 以异步方式获取城市区域然后使用 findCoffee 查找这个区域内的咖啡店这是 findCity 它使用 addressFilter 搜索地点就像 JS 代码那样这是 findCoffee 我们利用 Cupertino 区域并使用 regionPriority 搜索必须位于这个区域内的咖啡店好了我想有了这些改进我一定可以成为最优秀的 Apple Store 商店打卡人员我也这么认为！很期待看到你的打卡之旅取得新进展你甚至可以收集护照上的印章！
好了！我们已经介绍了很多内容！借助最新版本的 MapKit 可以轻松使用地点 ID 来引用地点使用地点卡显示有用的信息甚至将地点嵌入网页你可以使用它来搜索许多不同类型的地点还可以将搜索范围限定在特定区域 MapKit Server API 可通过分页功能提供比以往更多的结果 MapKit JS 提供了简化的令牌预置流程让你可以更轻松地上手在结束之前让我给大家布置一些作业使用地点 ID 来引用周六上午举办农贸市场的公园在你的 App 中使用地点卡来显示地点信息地点卡将为 App 搜索结果以及对你至关重要的特定地点提供深层次的信息为地图上的所有兴趣点启用地点卡为使用你的 App 探索某个区域的用户提供有价值的上下文务必访问这个链接： “使用地点 ID 标识唯一地点” 进一步了解如何使用地点 ID！希望你喜欢探索 MapKit 的新功能欢迎继续绘制地图我会继续打卡！

3:06 - Display a visitor center annotation

// Display a visitor center annotation

struct PlaceMapView: View {
    var placeID: String // "I63802885C8189B2B"
    
    @State private var item: MKMapItem?
    
    var body: some View {
        Map {
            if let item {
                Marker(item: item)
            }
        }
        .task {
            guard let identifier = MKMapItem.Identifier(
                rawValue: placeID
            ) else {
                return
            }
            let request = MKMapItemRequest(
                mapItemIdentifier: identifier
            )
            item = try? await request.mapItem
        }
    }
}

3:44 - Display an annotation for the center

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    #map {
      margin: 0 auto;
    }
  </style>
</head>
<body>

<script
  crossorigin async
  src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"
  data-callback="entryPoint"
  data-token="TODO: Add your token here"
></script>

<script>
window.entryPoint = () => {
  const id = "I63802885C8189B2B";
  const lookup = new mapkit.PlaceLookup();
  lookup.getPlace(id, annotatePlace);
};

const annotatePlace = (error, place) => {
  const center = place.coordinate;
  const span = new mapkit.CoordinateSpan(0.01, 0.01);
  const region = new mapkit.CoordinateRegion(center, span);
  const map = new mapkit.Map("map", { region });

  const annotation = new mapkit.PlaceAnnotation(place);
  map.addAnnotation(annotation);
};
</script>

<div id="map" style="width: 100dvw; height: 100dvh;"></div>

</body>

</html>

7:32 - Display my favorite apple stores

// Display my favorite apple stores

struct VisitedStoresView: View {
    var visitedStores: [MKMapItem]
    @State private var selection: MKMapItem?
    
    var body: some View {
        Map(selection: $selection) {
            ForEach(visitedStores, id: \.self) { store in
                Marker(item: store)
            }
            .mapItemDetailSelectionAccessory()
        }
    }
}

7:50 - Display a selectable annotation

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    #map {
      margin: 0 auto;
    }
  </style>
</head>
<body>

<script
  crossorigin async
  src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"
  data-callback="entryPoint"
  data-token="TODO: Add your token here"
></script>

<script>
window.entryPoint = () => {
  const id = "I63802885C8189B2B";
  const lookup = new mapkit.PlaceLookup();
  lookup.getPlace(id, annotatePlace);
};

const annotatePlace = (error, place) => {
  const center = place.coordinate;
  const span = new mapkit.CoordinateSpan(0.01, 0.01);
  const region = new mapkit.CoordinateRegion(center, span);
  const map = new mapkit.Map("map", { region });

  const annotation = new mapkit.PlaceAnnotation(place);
  map.addAnnotation(annotation);

  const accessory = new mapkit.PlaceSelectionAccessory();
  annotation.selectionAccessory = accessory;
};
</script>

<div id="map" style="width: 100dvw; height: 100dvh;"></div>

</body>

</html>

9:15 - List stores and show details when selected

// List stores and show details when selected

struct StoreList: View {
    var stores: [MKMapItem]
    @State private var selectedStore: MKMapItem?
    
    var body: some View {
        List(
            stores,
            id: \.self,
            selection: $selectedStore
        ) {
            Text($0.name ?? "Apple Store")
        }
        .mapItemDetailSheet(item: $selectedStore)
    }
}

9:37 - Show visitor center details

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    #map {
      margin: 0 auto;
    }
  </style>
</head>
<body>

<script
  crossorigin async
  src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"
  data-callback="entryPoint"
  data-token="TODO: Add your token here"
></script>

<script>
window.entryPoint = () => {
  const id = "I63802885C8189B2B";
  const lookup = new mapkit.PlaceLookup();
  lookup.getPlace(id, annotatePlace);
};

const annotatePlace = (error, place) => {
  const el = document.getElementById("place");
  const detail = new mapkit.PlaceDetail(el, place, {
    colorScheme: mapkit.PlaceDetail.ColorSchemes.Adaptive
  });
};
</script>

<div id="place"></div>

</body>

</html>

11:17 - Display a place card for the selected map feature, too

// Display a place card for the selected map feature, too

struct VisitedStoresView: View {
    var visitedStores: [MKMapItem]
    @State private var selection: MapSelection<MKMapItem>?
    
    var body: some View {
        Map(selection: $selection) {
            ForEach(visitedStores, id: \.self) { store in
                Marker(item: store)
                    .tag(MapSelection(store))
            }
            .mapItemDetailSelectionAccessory(.callout)
        }
        .mapFeatureSelectionAccessory(.callout)
    }
}

13:09 - Find Cupertino, then find coffee

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    #map {
      margin: 0 auto;
    }
  </style>
</head>
<body>

<script
  crossorigin async
  src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"
  data-callback="entryPoint"
  data-token="TODO: Add your token here"
></script>

<script>
window.entryPoint = () => {
  const addressFilter = mapkit.AddressFilter.including([
    mapkit.AddressCategory.Locality
  ]);
  const citySearch = new mapkit.Search({ addressFilter });
  citySearch.search("Cupertino", showMap);
};

const showMap = (error, cities) => {
  const center = cities.places[0].coordinate;
  const span = new mapkit.CoordinateSpan(0.01, 0.01);
  const region = new mapkit.CoordinateRegion(center, span);
  const map = new mapkit.Map("map", { region });

  const coffeeSearch = new mapkit.Search({
    region,
    regionPriority: mapkit.Search.RegionPriority.Required,
    pointOfInterestFilter: mapkit.PointOfInterestFilter.including([
      mapkit.PointOfInterestCategory.Cafe
    ])
  });
  coffeeSearch.search("coffee", (error, results) => {
    for (const place of results.places) {
      const marker = new mapkit.PlaceAnnotation(place);
      map.addAnnotation(marker);
    }
  });
};
</script>

<div id="map" style="width: 100dvw; height: 100dvh;"></div>

</body>

</html>

14:41 - Finding coffee in Cupertino

// Finding coffee in Cupertino

struct CoffeeMap: View {
    @State private var position: MapCameraPosition = .automatic
    @State private var coffeeShops: [MKMapItem] = []
    
    var body: some View {
        Map(position: $position) {
            ForEach(coffeeShops, id: \.self) { café in
                Marker(item: cafe)
            }
        }
        .task {
            guard let cupertino = await findCity() else {
                return
            }
            coffeeShops = await findCoffee(in: cupertino)
        }
    }
    
    private func findCity() async -> MKMapItem? {
        let request = MKLocalSearch.Request()
        request.naturalLanguageQuery = "cupertino"
        
        request.addressFilter = MKAddressFilter(
            including: .locality
        )
        
        let search = MKLocalSearch(request: request)
        let response = try? await search.start()
        return response?.mapItems.first
    }
    
    private func findCoffee(in city: MKMapItem ) async -> [MKMapItem] {
        let request = MKLocalSearch.Request()
        request.naturalLanguageQuery = "coffee"
        let downtown = MKCoordinateRegion(
            center: city.placemark.coordinate,
            span: .init(
                latitudeDelta: 0.01,
                longitudeDelta: 0.01
            )
        )
        request.region = downtown
        request.regionPriority = .required
        let search = MKLocalSearch(request: request)
        let response = try? await search.start()
        return response?.mapItems ?? []
    }
}

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。

提交你查询的内容时出现错误。请检查互联网连接，然后再试一次。

章节

资源

相关视频

WWDC23