更新Google地图流量图层，无需重新加载页面 [英] Update Google Maps traffic layer without page reloading

问题描述

我将Google地图嵌入到我的网页中：

 < script async defer src =https：// maps .googleapis.com /地图/ API / JS键=安培;回调= initMap>< /脚本> 
  

我使用initMap js函数来初始化映射：

 函数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重新加载地图图块。

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

函数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（地图）; setInterval（function（）{map.setOptions（{styles：[{featureType：road，elementType：geometry.fill，stylers：[{saturation：Math.random（）}] }}}，15000 //每15秒重新加载磁贴）;} google.maps.event.addDomListener（window，'load'，initMap）;

  html，body，＃t-map {height：100％;保证金：0; padding：0}  

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

问题：根据浏览器/地图尺寸/连接的不同，被重新加载。

I have a Google Maps embedded into my page:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap"></script> 

I use the initMap js function to initialize the map:

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

I want the traffic layer to update automatically after x amount of time without reloading the page. How would I go about doing this?

解决方案

As it seems the TrafficLayer currently will be drawn via the map-tiles, so you would need to force the API to reload the map-tiles.

A possible way to achieve it: set a random map-style(which doesn't affect the appeareance of the tiles)

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>

The issue: depending on the browser/map-size/connection a flickering may hapen when the tiles will be reloaded.

这篇关于更新Google地图流量图层，无需重新加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！