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个时间后自动更新，而不重新加载页面。我该怎么做呢？

Answer 1

由于看起来TrafficLayer目前将通过地图图块绘制，因此您需要强制API重新加载地图图块。

实现它的一种可能方法：设置随机地图样式（不会影响切片的外观）

＆＃13;

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);

＆＃13;

       html,
       body,
       #t-map {
         height: 100%;
         margin: 0;
         padding: 0
       }

＆＃13;

<div id="t-map"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>

＆＃13;

问题：取决于浏览器/地图尺寸/连接，当重新加载图块时，闪烁可能会发生。

更新Google地图流量图层，无需重新加载页面

1 个答案: