man*_*son 22 html javascript google-maps
我一直无法正确地更新Google Maps API v3.我有一个javascript计时器运行应该定期刷新流量层但我没有看到它发生.
据我理解文档,我应该可以说"layer.setMap(null);" 接着是"layer.setMap(map);" 刷新图层(来源:https://developers.google.com/maps/documentation/javascript/reference#TrafficLayer).
我知道正在下载新的地图图块(例如,我可以在Chrome的开发工具的参考资料部分看到它们),但是浏览器没有渲染它们.我可能缺少一些基本的东西.
我尝试了几件事,包括:
有没有办法确保浏览器在不强制重页加载的情况下呈现新图像？
以下是该页面的简化版本(基于Google地图刷新流量图层的答案).
<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>
Ser*_*gio 23
好吧,我已经找到了,并且上面提到的那是什么trafficLayer.setMap(null) 和trafficLayer.setMap(map)-只是开关与绘制的交通瓷砖瓷砖没有交通.此外map.setZoom(map.getZoom())(和任何其他缩放变量)不起作用,因为磁贴已经在缓存中,谷歌脚本甚至不尝试从服务器下载新的.
此外,似乎如果你只是打开谷歌地图并打开流量层它不令人耳目一新!这样的跛脚,谷歌!
所以我们必须找到一种不同的方法来解决它.
首先想到的是使用window.location.reload(true)wich将刷新图像缓存 - 我们认为它有效.不是一个好方法 - 重新加载整个页面需要太长时间.如何重新加载图片？我们试试吧!
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);
}
}
}
我们每N秒调用一次这个函数: setInterval(reloadTiles, 5000)
一些评论:
$("#map-canvas").find("img")- 将从您的地图容器中获取所有图像(map-canvas在我的情况下).并非所有都是瓷砖所以我们需要过滤它们 - 我注意到瓷砖是从像这样的域加载的mts(digit).googleapis.com/vt?pb=(hella long param).从中加载其他地图图像maps.gstatic.com.
所以我们得到平铺图像,添加伪造参数并更改其src.利润!
顺便说一句,我发现交通真正改变实际时间-瓷砖可能是不同的每一秒.
编辑
哦,对不起,这是工作样本.这是一个多雪的莫斯科,拥有巨大的交通:)