javascript Google Maps v3 - 客户端上的地图图块缓存?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8152030/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 02:28:14  来源:igfitidea点击:

Google Maps v3 - Map tile caching on client?

javascriptgoogle-mapscachinggoogle-maps-api-3

提问by David Pfeffer

I'm using Google Maps JS API v3 for a project. Is there a way to ask the map to cache tiles on the client's machine so that when they refresh the browser, the tiles don't have to all download again?

我正在为一个项目使用 Google Maps JS API v3。有没有办法让地图在客户端的机器上缓存切片,这样当他们刷新浏览器时,切片就不必再次全部下载?

Many of my clients are on cellular connections where redownloading the map takes a considerable amount of time.

我的许多客户都使用蜂窝连接,重新下载地图需要相当长的时间。

Thanks!

谢谢!

采纳答案by Manuel van Rijn

By default google maps return's cached images (you can see this in the network tab of the console).

默认情况下,谷歌地图返回缓存的图像(您可以在控制台的网络选项卡中看到这一点)。

enter image description here

在此处输入图片说明

If you user's having trouble caching the images, it's probably because they disabled the cache

如果您的用户在缓存图像时遇到问题,可能是因为他们禁用了缓存

回答by crockpotveggies

This is actually possible with HTML5 and its cache-manifest feature. I'd suggest this question (and answer) be updated.

这实际上可以通过 HTML5 及其缓存清单功能实现。我建议更新这个问题(和答案)。

Google coders themselves have tackled this problem and unfortunately the information isn't well disseminated.

谷歌编码人员自己已经解决了这个问题,不幸的是信息没有很好地传播。

Required Readings

必读

  1. First take a look at the Google Code blogpost here: http://googlecode.blogspot.com/2010/04/google-apis-html5-new-era-of-mobile.html
  2. 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/
  1. 首先看看这里的谷歌代码博文:http: //googlecode.blogspot.com/2010/04/google-apis-html5-new-era-of-mobile.html
  2. 然后阅读密苏里州自己的帖子: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 Will

The previous answer re the cache-manifest feature is incorrect. If you read the spec at http://www.w3.org/TR/html5/offline.html, under "5.7.3 The cache manifest syntax" you'll see that the NETWORK section of the manifest file actually lists resources that should NOT be cached:

关于缓存清单功能的先前答案是不正确的。如果您阅读http://www.w3.org/TR/html5/offline.html 上的规范,在“5.7.3 缓存清单语法”下,您会看到清单文件的 NETWORK 部分实际上列出了不应缓存:

# here is a file for the online whitelist -- it isn't cached, and
# references to this file will bypass the cache, always hitting the
# network (or trying to, if the user is offline).
NETWORK:
comm.cgi

The previous poster's example is actually saying:

上一个海报的例子实际上是在说:

1) cache the following files:

1)缓存以下文件:

/map/mobile/examples/template.aspx
/map/mobile/examples/template.css
/map/mobile/examples/template.js

2) fetch the following from the network:

2)从网络中获取以下内容:

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/