Html 离线使用 Google Maps V3，例如使用缓存清单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6294782/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Google Maps V3 offline, e.g. with cache-manifest?
提问by Richard
I'm writing an HTML5 mobile application that uses Google Maps V3 with a custom layer of OpenStreetMap tiles.
我正在编写一个 HTML5 移动应用程序，它使用 Google Maps V3 和 OpenStreetMap 图块的自定义层。
The OSM tiles (from tile.openstreetmap.org) are set to cache for just over 24 hours, and I'm using a cache-manifest for all my HTML/JS/CSS.
OSM 图块（来自tile.openstreetmap.org）设置为缓存超过 24 小时，我正在为我的所有 HTML/JS/CSS 使用缓存清单。
So the application could in theory be used offline, except the Google Maps interface isn't happy when offline.
因此，该应用程序理论上可以离线使用，除非离线时 Google 地图界面不愉快。
It always wants to call to the Google Maps server at http://maps.google.com/maps/api/js?sensor=false®ion=GB- when this fails, Google Maps fails to load.
它总是想调用谷歌地图服务器http://maps.google.com/maps/api/js?sensor=false®ion=GB- 当失败时，谷歌地图无法加载。
Is there any way to use Google Maps V3 API offline?
有没有办法离线使用Google Maps V3 API？
Could I cache-manifest http://maps.google.com/maps/api/js?sensor=false®ion=GB, or would that be a bad move?
我可以 cache-manifest http://maps.google.com/maps/api/js?sensor=false®ion=GB，还是会是一个糟糕的举动？
(Sorry for this rather beginner question, let me know if I can explain better!)
（对不起，这个相当初级的问题，如果我能解释得更好，请告诉我！）
回答by crockpotveggies
Google coders themselves have tackled this problem and unfortunately the information isn't well disseminated. But yes you can use cache-manifest to do exactly what you've described.
谷歌编码人员自己已经解决了这个问题，不幸的是信息没有很好地传播。但是，是的，您可以使用缓存清单完全按照您的描述进行操作。
Required Readings
必读
- First take a look at the Google Code blogpost here: http://googlecode.blogspot.com/2010/04/google-apis-html5-new-era-of-mobile.html
- Then have a read at Missouri State's own post: http://blogs.missouristate.edu/web/2010/05/12/google-maps-api-v3-developing-for-mobile-devices/
- 首先看看这里的谷歌代码博文：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/
The Technique
技术
- You mustcache every URL used by Google Maps
- Employ methods to battle Chrome's and Firefox's stubborn caching methods by removing it from "offline websites"
- All customizations must be client-side in javascript
- 您必须缓存 Google 地图使用的每个 URL
- 通过从“离线网站”中删除 Chrome 和 Firefox 顽固的缓存方法，使用方法来对抗它
- 所有自定义都必须在 javascript 客户端
Your cache file will look like (as per Missouri State):
您的缓存文件将如下所示（根据密苏里州）：
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/
Caveats
注意事项
You will need to be entirely HTML5-based and recognize the impacts this will have on your users. This situation is handy where either your users are up-to-date on browser standards/devices or you have control over user choices.
您需要完全基于 HTML5 并认识到这将对您的用户产生的影响。如果您的用户在浏览器标准/设备上是最新的，或者您可以控制用户选择，这种情况就很方便。
Hope this helps.
希望这可以帮助。
回答by Mithun Sreedharan
Not possible!
不可能！
Google map CDN URLs have dynamic nature,
谷歌地图 CDN URL 具有动态性，
- https://mts0.googleapis.com/vt?pb=!1m4!1m3!1i8!2i234!3i15...
- https://mts1.googleapis.com/vt?pb=!1m4!1m3!1i8!2i233!3i155!!...
- https://mts0.googleapis.com/vt?pb=!1m4!1m3!1i8!2i234!3i15...
- https://mts1.googleapis.com/vt?pb=!1m4!1m3!1i8!2i233!3i155!!...
No wildcard characters are allowed in CACHE section of the HTML5 cache manifest files
HTML5 缓存清单文件的 CACHE 部分中不允许使用通配符
We can nothave some thing like,
我们不能有这样的事情，
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:
*
回答by Mike S
I had a google map project that I needed offline. I found Bing Maps (https://www.bingmapsportal.com/ISDK/AjaxV7) is much better offline and switched my project over to that and I'm happy. I ran the google and bing version side-by-side in offline mode and Bing was great. Whereas google would immediatey fail on tile loads, Bing maps cached more tiles and appeared to even resize zoomed tiles to at least give you something in offline mode.
我有一个离线需要的谷歌地图项目。我发现 Bing Maps ( https://www.bingmapsportal.com/ISDK/AjaxV7) 离线更好，并将我的项目切换到那个，我很高兴。我在离线模式下并排运行 google 和 bing 版本，Bing 很棒。谷歌会在图块加载时立即失败，而 Bing 地图缓存了更多图块，似乎甚至可以调整缩放图块的大小，至少可以在离线模式下为您提供一些东西。
I know the question here is about Google maps; but if you don't care about bing vs. google and really just need offline support, I'd highly recommend trying Bing maps. It solved it for me.
我知道这里的问题是关于谷歌地图；但是，如果您不关心 bing 与 google 的关系，并且真的只需要离线支持，我强烈建议您尝试使用 Bing 地图。它为我解决了它。
回答by Alumni
I have http://maps.google.com/maps/api/js?sensor=falsein the CACHEsection of cache.manifest, together with my application files and there isn't any problem.
我http://maps.google.com/maps/api/js?sensor=false在 ,CACHE部分cache.manifest以及我的应用程序文件中没有任何问题。
Although, I believe you also have to cache other files that the Google Maps API requests. You can take a look at the files downloaded by your app and include them.
虽然，我相信您还必须缓存 Google Maps API 请求的其他文件。您可以查看应用程序下载的文件并将其包含在内。
