Javascript 谷歌地图刷新流量层

在我的Rails应用程序中，背景由一个带有谷歌地图的全屏div和一个流量层组成。 这是页面加载时调用的内容：

$(function () {  
  updateMap();
});

updateMap函数在div元素“Google_Map”上创建一个Google映射：

function updateMap()  {
      var latlng = new google.maps.LatLng(52.157927, 4.704895);
    var myOptions = {
      zoom: 10,
      center: latlng,
      disableDefaultUI: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("google_map"),
        myOptions);
    var trafficLayer = new google.maps.TrafficLayer();    
    trafficLayer.setMap(map);
    updateTrafficOnMap(map, trafficLayer);    
}

最后一个调用是此函数：

function updateTrafficOnMap(map, overlay)
{
    overlay.setMap();
    overlay = null;
    var trafficLayer = new google.maps.TrafficLayer();    
    trafficLayer.setMap(map);

    setTimeout(function(){ updateTrafficOnMap(map, trafficLayer) }, 60000);
}

它应该每分钟更新一次流量层

现在在页面加载时正确加载了div，层也被加载了。但是，这永远不会更新，因此除非重新加载整个页面，否则不会有实时流量信息

---

有人知道如何让流量层正常刷新吗？

所以我找到了答案。显然，在超时函数中，无法使用新覆盖更新贴图。我不知道确切的原因（例如，函数内部会显示“alert（）”）。我使用updateOnTrafficMap函数中的switch语句解决了这个问题，因此每分钟布局消失一次，然后使用另一个超时（设置为1毫秒）立即重新出现

函数更新映射（）{
//下面创建了一个具有缩放级别10和LatLong坐标的Google地图
//如下所述
var latlng=新的google.maps.latlng（52.053335,4.917755）；
变量myOptions={
缩放：10，
中心：拉特林，
disableDefaultUI:true，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“google_-map”），myOptions）；
UpdateRafficonMap（map，null，1）；
}
函数updateRafficonMap（地图，交通层，打开）
{
如果（on==0）{
trafficLayer.setMap（空）；
setTimeout（函数（）{updateRafficonMap（map，null，1）}，1）
}
如果（on==1）{
var TrafficLayer=new google.maps.TrafficLayer（）；
trafficLayer2.setMap（地图）；
//300毫秒（或5分钟）后更新交通地图
setTimeout（函数（）{updateRafficonMap（map，trafficLayer2，0）}，300000）
}
}

在加载文档时，您调用updateMap（）函数，当然，您应该有一个id为“google_map”的DIV来显示地图。

这对我很有用：

var _mainMap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var _gmapTrLayer = new google.maps.TrafficLayer();
_gmapTrLayer.setMap(_mainMap);
setInterval(refreshGmapsTrafficLayer, 60000); // runs every minute

function refreshGmapsTrafficLayer() {
    _gmapTrLayer.setMap(null);
    _gmapTrLayer.setMap(_mainMap);
}

---

整个初始化例程中的setInterval使我获得了所需的刷新。options.ts\u google\u map\u traffic\u refresh\u毫秒设置为所需的毫秒

 setInterval(_ts_map_initialize, options.ts_google_map_traffic_refresh_milliseconds);

    function _ts_map_initialize(){              
        console.log('function _ts_map_initialize()')
        var myLatlng = new google.maps.LatLng(options.ts_google_map_traffic_latHome,options.ts_google_map_traffic_lonHome);
        var myOptions = {
          zoom: ts_int_zoomLevel,
          center: myLatlng,
          panControl: false,              
          zoomControl: false,
          streetViewControl: false,
          overviewMapControl: false,              
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          styles:[{
              featureType:"poi",
              elementType:"labels",
              stylers:[{
                  visibility:"off"
              }]
          }]              
        }
        map = new google.maps.Map(document.getElementById('ts_google_map_traffic_canvas'), myOptions);
        defaultBounds = map.getBounds();

        trafficLayer = new  google.maps.TrafficLayer(); //add the layer - don't view it unless user toggles button  

        trafficLayer.setMap(map);

}

enter code here

---

它不应该是overlay.setMap（null）@邓肯：那也一样。然而，我自己找到了一个解决办法。见下文。我通过设置相同的例程并在3个浏览器（FF、IE、Ch）中同时运行，在科罗拉多州丹佛市（Denver，CO.）以10秒的刷新率进行了上述测试，刚刚开始了b4高峰时间。我手动刷新了一个浏览器。只有我手动刷新的那个保持了当前的交通状况。我可以看到新的红点出现在它上面。然后手动刷新其他地图，使其处于正确状态。我根据已接受的答案测试了上述内容，但它不起作用。当您只需要重新加载流量时，重新加载整个地图有点过头了。我认为最好添加

trafficLayer=nulltrafficLayer.setMap下的code>（空）否则，您将保留垃圾收集可能无法删除的未使用和不可访问的
TrafficLayer
对象。