11、构建 HTML5 地图应用：静态与交互式地图实现指南

构建 HTML5 地图应用：静态与交互式地图实现指南

1. 调试信息与性能分析

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

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

2. 展示静态地图

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

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

2.1 配置端点

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

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