更新Google地图交通图层而无需重新加载页面

Question

我在我的网页上嵌入了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段时间自动更新。我该怎么做？

- Tyler Hilbert

Answer 1

目前看来，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>

问题：根据浏览器/地图大小/连接的不同，当瓦片重新加载时可能会出现闪烁问题。

- Dr.Molle