了解高性能的 MapKit JS

大家好 我叫 Tim Chien 我是 Apple MapKit 团队的工程师 致力于 MapKit JS 方面的研究 今天我将讨论 几项令人激动的新功能 在将 MapKit JS 与您的网页版 App 整合在一起时 您可以使用这些功能 提供最佳体验 自 MapKit JS 在 2018 年推出以来 我们一直不懈地努力 每年都会增加新的功能 现在 MapKit JS 已成为了 Apple 网页产品中 不可或缺的组成部分 它整合到了许多网站中 例如 icloud.com 中 我们自己的“查找”服务器 还整合到了第三方网站中 例如 DuckDuckGo 和希腊的 一个房地产搜索网站 MapKit JS 能够 本地化地图功能 您将注意到此网站 利用了这一点 在任意网页版 App 中 采用 MapKit JS 都无比简单 只需添加到其中并进行初始化即可 但是我们希望 让您可以灵活地 以优化 App 性能的方式 采用 MapKit JS 因此从今年开始 我们将关注重点放到了性能上 我们研究了 如何让您的页面 更快地响应、 更快地载入 并以某种方式 赋予您更多控制权 从而使您可以 仅根据自己的需要 添加所需的功能 今天 很高兴向大家介绍 帮助实现前面所述目标的 三个新功能 这些新功能包括 用于实现高性能 MapKit JS 载入的新标记 按需载入其他 MapKit JS 库的功能 最后是 App 发出信号 以向用户显示 所需地图功能的 新方式 现在 为了演示这些新功能 如何改进 您的网页版 App 让我们假设 您正在为海盗同伴 构建交互式藏宝图 您采用了 MapKit JS 的默认实现 然而 当使用信号不佳的 海盗船 Wi-Fi 查看此页面时 它的载入时间过长 用户必须等待很长时间 才能看到地图 这让您的船友们感到不耐烦 为了防止发生暴动 您可以使用 新的高性能 MapKit JS 载入标记 它将默认实现换成了 带有额外属性的扩展标记 您将使用它 来调优您的网页版 App 首先 MapKit JS 现在提供了 新的 JavaScript 套装 即 market.core.js 其中仅包含 帮助您着手开始的极少代码 接下来我们 要告诉 MapKit JS 我们所需的功能子集 在这里我们 仅指定了 map 库 它是显示交互式地图的 最小功能集 我们将通过使用 async 属性 来防止 MapKit JS 阻止页面载入 并在完成载入后 调用由 data callback 属性 指定的回调 由于 MapKit JS 不再 阻止页面载入 因此您的网页版 App 应该 在首次评估其接口之前 便断言它已经准备就绪 例如 当 MapKit JS 准备就绪时 这里的 async 函数 将解析为 MapKit 接口 与往常一样 MapKit JS 一旦载入 便可在全局窗口对象中使用 如果未定义 MapKit 对象 则意味着 MapKit JS 尚未载入 此外 我们要检查 初始库是否 已经载入 记得我们 在标记中使用 data 库的属性 请求载入了 map 库 这两个测试中的任何一个失败 都意味着 使用 data callback 属性 设置的回调没有被调用 在这里 我们 将回调转换为 有关 async 函数的 Promise 并在 Promise 得到解决后 立即清理回调 这样一来 我们就保证了 当此功能恢复时 MapKit JS 做好了 开始运行的准备 现在 返回语法部分 高性能标记中 还有一些 其他有用的属性 包括 crossorigin 属性 它允许浏览器针对转到 MapKit JS CDN 的所有请求 重复使用 一个 HTTP/2 连接 我们还希望 MapKit JS 能够在出现初始化的机会时 立即完成自身的初始化 我们可以通过在标记中 设置一个 initial token 来实现此目的 通过组合使用所有这些语句 可以使页面的载入速度更快 但是我们还没有进展到这一步

因为我们只请求 载入了 map 库 我们需要载入 annotations 库 以便使我们的海盗船和宝物 重新在地图上显示 这时使用第二种优化方法 非常方便 我们专为 mapkit.load 提供了一个新方法 它会按需 异步载入其他库 如果您载入的任何库 需要另一个库 系统将自动处理 这里显示了它的实际应用 直接调用 mapkit.load 方法 以载入 annotations 库 为 load 事件 添加侦听器 然后在调用注释时 添加注释 当然 您还可以载入 除 annotations 以外的其他库 例如 服务涵盖 搜索和地理编码器等 所有服务 API 完整地图载入 MapKit 地图类中 所有可用的功能 这包括基本地图、 悬浮窗、注释 和用户位置显示 GeoJSON 载入 GeoJSON 导入程序

现在 载入的体验已经很棒了 但我们还可以 进一步改善它 这是我们今天 要介绍的第三个功能： 指定了优先级的地图启动 通过这个新的 loadPriority 属性 我们可以指示 MapKit JS 更快地显示兴趣点 让暴躁的海盗能 更愉快地开始寻宝之旅 当设置 loadPriority 时 您应该满足 用户所需的最佳体验 可用的 loadPriority 选项 有三个 PointsOfInterest 指示 MapKit 地图 更快地显示地图标签 和兴趣点 甚至早于注释显示 另一方面 LandCover 只作用于 地表覆盖、道路和边界 这些选项 在启动过程中 会干扰一些地图行为 例如旋转 或视口的精确地图区域 您可以通过将 loadPriority 设置为 none 来彻底将它关闭 这就是它 在实际应用中的效果 只需使用地图构造函数选项中的 loadPriority 选项 指定所需的优先级即可 在这里我们要求 MapKit 地图 首先显示兴趣点

现在的载入体验 甚至比之前更好了 今天 我们介绍了 三个主要功能 它们设计用于改进 App 的 地图载入体验 我们相信您可以 整合 MapKit JS 同时确保整体用户体验 顺畅无缝且不受影响 欢迎在您的现有 App 中 逐步采用这些新功能 每个功能都有各自的优势 务必查看详细文档 以及下面所示的 Maps Server API 讲座 我们满怀期待 想要看看 您将如何利用这些新功能 感谢观看