刷新Google Maps API V3图层 [英] Refreshing Google Maps API V3 Layers
问题描述
我一直无法让Google Maps API v3正确更新。我有一个JavaScript定时器运行，应该定期刷新流量层，但我没看到它发生。
据我了解该文档，我应该能够说一些像layer.setMap（null）;后面跟着layer.setMap（map）;刷新图层（来源： https://developers.google.com/maps / documentation / javascript / reference＃TrafficLayer ）。
我知道正在下载新的地图图块（例如，我可以在参考资料部分看到它们Chrome的开发工具），但浏览器没有渲染它们。这可能是我失踪的根本原因。
我尝试了几件事情，包括：
- 使用元标记禁用缓存：使用< meta>标签关闭所有浏览器中的缓存？
- 使用清单文件：
- 禁用Chrome的浏览器缓存（同时保持开发工具处于打开状态）：禁用Chrome缓存以进行网站开发
- 激发另一个事件以刷新图层： Google地图刷新流量图层
-
- 完全重新初始化每个计时器事件的地图。 b
$ b有没有一种方法可以确保浏览器在不强制整页重新加载的情况下呈现新图像？
以下是简化版（基于答案的）来自 Google地图刷新流量图层）。
< html>
< head>
< title>地图测试< /标题>
< script type =text / javascriptsrc =https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=weather>< / script>
< script src =http://code.jquery.com/jquery-latest.min.js>< / script>
< script type =text / javascript>
var map，
trafficLayer，
mapTimerHandle;
$ b $（函数（）{
initMap（）;
mapTimerHandle = setInterval（refreshMap，15000）;
}）;
函数refreshMap（）{
trafficLayer.setMap（null）;
trafficLayer.setMap（map）;
函数initMap（）{
var mapDiv = document.getElementById（'map'）;
map = new google.maps.Map（mapDiv，{zoom：15，center：new google.maps.LatLng（40.7127，-74.0059）}）;
trafficLayer = new google.maps.TrafficLayer（）;
trafficLayer.setMap（map）;
}
< / script>
< / head>
< body style =margin：0px;>
< div id =mapstyle =width：100％; height：100％;>< / div>
< / body>
< / html>
解决方案好的，我发现了什么，什么是上面提到的是
trafficLayer.setMap（null）和trafficLayer.setMap（map）- just switches 瓦片与没有交通的瓦片绘制交通。另外map.setZoom（map.getZoom（））（以及任何其他变焦变量）不起作用，因为图块已经在缓存中，谷歌脚本甚至不尝试从服务器上下载新鲜的。
此外，似乎如果你只是打开谷歌地图，并打开交通层，它不会令人耳目一新！这样的跛脚，谷歌！
所以我们必须找到一种不同的方式来解决它。
第一个想法是使用
window.location.reload（true）来刷新图像缓存 - 我们看到它的工作原理。这并不是一个好的方法 - 整个页面重新加载时间过长。如何重新加载图像？让我们来试试！
pre $函数reloadTiles（）{
var tiles = $（＃map-canvas）。find （ IMG）; （var i = 0; i< tiles.length; i ++）{
var src = $（tiles [i]）。attr（src）;
if（/googleapis.com\/vt\?pb=/.test(src））{
var new_src = src.split（& ts）[0] +'& amp ; ts ='+（new Date（））。getTime（）;
$（tiles [i]）。attr（src，new_src）;
}
}
}
我们每次调用这个函数N秒：
setInterval（reloadTiles，5000）
一些评论：
$（＃map-canvas）。find（img）- 将抓取地图容器中的所有图像（在我的情况下，map-canvas）。不是所有的瓷砖都需要瓷砖，所以我们需要将它们过滤出来 - 我注意到瓷砖是从mts（digit）.googleapis.com / vt？pb =（hella long param）。其他地图图像从maps.gstatic.com。
加载。因此，我们获取平铺图像，添加伪造参数和改变他们的src。 利润！
顺便说一下，我发现流量真的在时间 - 瓦片可能每秒不同。
编辑
哦，对不起，这里是工作示例。这是一个莫斯科雪，交通非常繁忙：）
I've been having trouble getting Google Maps API v3 to update correctly. I've got a javascript timer running that should be refreshing the traffic layer periodically but I'm not seeing it happening.
As I understand the documentation, I should be able to say something like "layer.setMap(null);" followed by "layer.setMap(map);" to refresh the layer (source: https://developers.google.com/maps/documentation/javascript/reference#TrafficLayer).
I know the new map tiles are being downloaded (for example, I can see them in the Resources section of Chrome's dev tools), but the browser isn't rendering them. There is probably something fundamental I'm missing.
I've tried several things, to include:
- Using meta tags to disable caching: Using <meta> tags to turn off caching in all browsers?
- Using a manifest file: How to prevent Google Maps API v3 from caching tiles (to save storage space)?
- Disabling Chrome's browser caching (while keeping the dev tools open): Disabling Chrome cache for website development
- Firing another event to refresh the layers: Google Maps refresh traffic layer
- Completely re-initializing the map every timer event.
Is there a way to ensure the browser will render the new images without forcing a full page reload?
Below is a simplified version of the page (based off of the answer from Google Maps refresh traffic layer).
<html> <head> <title>Map Testing</title> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=weather"></script> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> var map, trafficLayer, mapTimerHandle; $(function() { initMap(); mapTimerHandle = setInterval(refreshMap, 15000); }); function refreshMap() { trafficLayer.setMap(null); trafficLayer.setMap(map); } function initMap() { var mapDiv = document.getElementById('map'); map = new google.maps.Map(mapDiv, {zoom: 15, center: new google.maps.LatLng(40.7127, -74.0059)}); trafficLayer = new google.maps.TrafficLayer(); trafficLayer.setMap(map); } </script> </head> <body style="margin:0px;"> <div id="map" style="width:100%; height:100%;"></div> </body> </html>解决方案Ok, what i've found, and what is mentioned above is that
trafficLayer.setMap(null)andtrafficLayer.setMap(map)- just switches tiles with drawn traffic to tiles without traffic. Alsomap.setZoom(map.getZoom())(and any other variaties of zoom) doesn't work because tiles are already in cache and google scripts don't even try to download fresh ones from server.Also, seems that if you just open google maps and turn on traffic layer it's not refreshing! Such a lame, google!
So we have to find a different way to solve it.
First thought is to use
window.location.reload(true)wich will flush image cache - and we see it works. Not a good way to go though - reloading whole page taking too long. How about reloading images? Let's try!function reloadTiles() { var tiles = $("#map-canvas").find("img"); for (var i = 0; i < tiles.length; i++) { var src = $(tiles[i]).attr("src"); if (/googleapis.com\/vt\?pb=/.test(src)) { var new_src = src.split("&ts")[0] + '&ts=' + (new Date()).getTime(); $(tiles[i]).attr("src", new_src); } } }And we call this function every N seconds:
setInterval(reloadTiles, 5000)some comments:
$("#map-canvas").find("img")- will grab all images from your map container (map-canvasin my case). Not all are tiles so we need to filter them out - i've noticed that tiles are loaded from domains likemts(digit).googleapis.com/vt?pb=(hella long param). Other map images are loaded frommaps.gstatic.com.So we get tile images, add bogus parameter and change their src. Profit!
Btw, i've found that traffic really changes in real time - tiles may be different each second.
Edit
Oh, sorry, here's working sample. And it's a snowy Moscow with a huge traffic :)
这篇关于刷新Google Maps API V3图层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
