Google Maps v3 - 在客户端上映射磁贴缓存?

Dav*_*fer 16 javascript caching google-maps google-maps-api-3

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

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

谢谢!

Man*_*ijn 11

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

在此输入图像描述

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


cro*_*ies 6

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

谷歌编码员自己已经解决了这个问题,遗憾的是信息传播得不好.

所需读物

  1. 首先来看看Google Code博文: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/

技术

  • 必须缓存Google地图使用的每个网址
  • 使用方法来对抗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/
Run Code Online (Sandbox Code Playgroud)

注意事项

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

希望这可以帮助.


小智 5

之前的答案是缓存清单功能不正确.如果您阅读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
Run Code Online (Sandbox Code Playgroud)

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

1)缓存以下文件:

/map/mobile/examples/template.aspx
/map/mobile/examples/template.css
/map/mobile/examples/template.js
Run Code Online (Sandbox Code Playgroud)

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/
Run Code Online (Sandbox Code Playgroud)

  • 处理这个问题的正确方法是编辑上一张海报的答案,如果可以在没有重大编辑的情况下进行纠正.否则,您应该对之前的帖子发表评论,可能会将其投票,然后提供正确的答案.答案应该是自成一体的,而不是对其他答案的评论. (2认同)