离线使用 Google Maps V3，例如与缓存清单？答案

【问题标题】：Using Google Maps V3 offline, e.g. with cache-manifest?离线使用 Google Maps V3，例如与缓存清单？
【发布时间】：2011-09-11 19:03:16
【问题描述】：

我正在编写一个 HTML5 移动应用程序，它使用 Google Maps V3 和 OpenStreetMap 图块的自定义层。

OSM 切片（来自tile.openstreetmap.org）被设置为缓存超过 24 小时，我正在为我的所有 HTML/JS/CSS 使用缓存清单。

因此，理论上该应用程序可以离线使用，但离线时 Google 地图界面不满意。

它总是想调用http://maps.google.com/maps/api/js?sensor=false&region=GB 的 Google Maps 服务器 - 如果调用失败，Google Maps 将无法加载。

有什么方法可以离线使用 Google Maps V3 API？

我可以缓存清单http://maps.google.com/maps/api/js?sensor=false&region=GB，否则这是一个糟糕的举动？

（对不起这个相当初学者的问题，如果我能解释得更好，请告诉我！）

【问题讨论】：

Google Maps v3 - Map tile caching on client? 的可能重复项

标签： html caching google-maps

【解决方案1】：

Google 编码人员自己已经解决了这个问题，但遗憾的是信息没有很好地传播。但是是的，您可以使用缓存清单来完全按照您的描述进行操作。

必读

首先在此处查看 Google 代码博文：http://googlecode.blogspot.com/2010/04/google-apis-html5-new-era-of-mobile.html
然后阅读密苏里州立大学自己的帖子：http://blogs.missouristate.edu/web/2010/05/12/google-maps-api-v3-developing-for-mobile-devices/

技术

您必须缓存 Google 地图使用的每个网址
通过将 Chrome 和 Firefox 顽固的缓存方法从“离线网站”中删除来对抗 Chrome 和 Firefox 的顽固缓存方法
所有自定义都必须在 javascript 中的客户端

您的缓存文件将如下所示（根据密苏里州）：

CACHE MANIFEST
/map/mobile/examples/template.aspx
/map/mobile/examples/template.css
/map/mobile/examples/template.js
NETWORK:
http://maps.gstatic.com/
http://maps.google.com/
http://maps.googleapis.com/
http://mt0.googleapis.com/
http://mt1.googleapis.com/
http://mt2.googleapis.com/
http://mt3.googleapis.com/
http://khm0.googleapis.com/
http://khm1.googleapis.com/
http://cbk0.googleapis.com/
http://cbk1.googleapis.com/
http://www.google-analytics.com/
http://gg.google.com/

注意事项

您需要完全基于 HTML5 并认识到这将对您的用户产生的影响。如果您的用户在浏览器标准/设备上是最新的，或者您可以控制用户的选择，这种情况很方便。

希望这会有所帮助。

【讨论】：

网络部分将不被缓存。见developer.mozilla.org/de/docs/Web/HTML/…。 “缓存清单文件中的 NETWORK: 部分标题下列出的文件是需要连接到服务器的白名单资源。对此类资源的所有请求都会绕过缓存，即使用户处于脱机状态。可以使用通配符。”

【解决方案2】：

我在cache.manifest 的CACHE 部分有http://maps.google.com/maps/api/js?sensor=false，连同我的应用程序文件，没有任何问题。

不过，我相信您还必须缓存 Google Maps API 请求的其他文件。您可以查看您的应用下载的文件并将其包含在内。

【讨论】：

【解决方案3】：

不可能！

Google 地图 CDN 网址具有动态特性，

HTML5 缓存清单文件的 CACHE 部分不允许使用通配符

我们不能有类似的东西，

CACHE MANIFEST
/css/style.css
/js/libs/modernizr-2.0.6.min.js
/js/libs/jquery-2.1.4.js
http://mts0.googleapis.com/*
http://mts1.googleapis.com/*
http://fonts.googleapis.com/*
NETWORK:
*

【讨论】：

缓存清单应该是什么样的？

【解决方案4】：

我有一个离线需要的谷歌地图项目。我发现 Bing Maps (https://www.bingmapsportal.com/ISDK/AjaxV7) 在离线状态下要好得多，并将我的项目切换到那个位置，我很高兴。我在离线模式下并排运行了谷歌和必应版本，必应很棒。虽然谷歌会立即在瓦片加载上失败，但 Bing 地图缓存了更多瓦片，并且似乎甚至可以调整缩放瓦片的大小，至少在离线模式下为您提供一些东西。

我知道这里的问题是关于谷歌地图的；但是，如果您不关心 bing 与 google，并且真的只需要离线支持，我强烈建议您尝试 Bing 地图。它为我解决了它。

【讨论】：