我的页面中嵌入了 Google 地图：
<script async defer src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap"></script>
我使用 initMap js 函数来初始化地图：
function initMap() {
var map = new google.maps.Map(document.getElementById('t-map'), {
zoom: 13,
center: {
lat: 39.103119,
lng: -84.512016,
},
disableDefaultUI: true,
});
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
}
我希望流量层在 x 时间后自动更新，而无需重新加载页面。我该怎么做呢？
由于目前 TrafficLayer 似乎将通过地图图块绘制，因此您需要强制 API 重新加载地图图块。
实现它的可能方法：设置随机地图样式（不影响图块的外观）
function initMap() {
var map = new google.maps.Map(document.getElementById('t-map'), {
zoom: 13,
center: {
lat: 38.9071923,
lng: -77.0368707,
},
disableDefaultUI: true,
});
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
setInterval(function() {
map.setOptions({
styles: [{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [{
"saturation": Math.random()
}]
}]
})
},
15000 //reload tiles every 15 sec
);
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#t-map {
height: 100%;
margin: 0;
padding: 0
}
<div id="t-map"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
问题：根据浏览器/地图大小/连接，重新加载图块时可能会发生闪烁。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
