11、使用 HTML5 API 创建地图应用指南

使用 HTML5 API 创建地图应用指南

1. 调试信息与性能分析

调试信息能让我们了解从应用加载到视图准备好所需的时间。在本地主机上运行时，DNS 和连接查找总是在 0 毫秒内完成，即瞬间完成。而当应用在外部服务器上运行时，这些时间会增加，反映出查找服务器并连接所需的时长。

从相关截图可以看出，页面加载并准备好服务所需的时间并不长。真正耗时的部分是等待应用从反向地理定位获取位置数据，大约需要 1.5 秒，这个时间通常在 1 - 10 秒之间波动，除非找到缓存请求的方法，否则难以减少。

2. 展示静态地图

静态地图是所选位置的图像快照，与交互式地图相比，使用静态地图有诸多优势：
- 无额外开销：它只是一个普通图像，速度快且轻量级。
- 可预渲染和缓存：这意味着对地图提供商的请求减少，可能可以使用更小的数据套餐。
- 完全可控：使用静态地图可以完全掌控地图，而使用第三方服务通常需要向服务方交出部分控制权。

可使用的地图提供商除了 OpenStreetMap 外，还有 Yahoo! Maps、Bing Maps、Google Maps、MapQuest 等。接下来将设置应用连接其中几个服务，以便进行比较和选择。

2.1 配置 endpoints

打开 config.json 文件，在文件的结束括号前添加以下代码（确保在 openstreetmap 后添加逗号）：

"google": {
  "name": "google",