更新谷歌地圖業務層

Question

我有一個谷歌地圖嵌入到我的網頁：

<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時間後自動更新，無需重新加載頁面。我會如何去做這件事？

Answer 1

由於看來TrafficLayer目前將通過地圖圖塊繪製，因此您需要強制API重新加載地圖圖塊。

一種可能的方法來實現它：設置一個隨機地圖樣式（不影響瓷磚的appeareance）

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>

問題：根據瀏覽器/當瓷磚重新加載時，可能會發生閃爍的地圖大小/連接。