我一直在尝试让Google Maps API v3正确更新,我运行了一个Javascript计时器来定期刷新交通图层,但我没有看到它实际发生。
根据文档,我应该能够像"layer.setMap(null);",然后是"layer.setMap(map);"这样做来刷新图层(来源:https://developers.google.com/maps/documentation/javascript/reference#TrafficLayer)。
我知道新地图瓦片正在下载(例如,我可以在Chrome的开发工具的资源部分中看到它们),但浏览器没有呈现它们。我可能错过了一些基本的东西。
我尝试了几件事情,包括:
- 使用meta标签禁用缓存:使用<meta>标签在所有浏览器中禁用缓存?
- 使用清单文件:如何防止Google Maps API v3缓存瓦片(以节省存储空间)?
- 禁用Chrome的浏览器缓存(同时保持开发工具打开):禁用Chrome缓存进行网站开发
- 触发另一个事件来刷新图层:Google Maps刷新交通图层
- 每个计时器事件完全重新初始化地图。
是否有一种方法可以确保浏览器渲染新的图像而不强制重新加载整个页面?
下面是页面的简化版本(基于Google Maps刷新交通图层的答案)。
<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>