谷歌地图刷新交通图层

Question

在我的Rails应用程序中，背景由一个全屏的div元素组成，其中包含Google Maps和交通图层。以下是页面加载时调用的代码：

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

更新地图功能会在名为“google_map”的div元素上创建一个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被正确加载，图层也被加载。但是它从未更新过，因此除非重新加载整个页面，否则无法获得实时的交通信息。

有人知道使交通图层正确刷新的魔术词吗？

- HTBR

---

难道不应该是overlay.setMap(null);吗？ - duncan

@duncan 这意味着同样的事情。然而，我自己找到了一个解决方案。请参见下文。 - HTBR

Answer 1

我找到了答案。显然，您无法在timeOut函数内部使用新的覆盖更新地图。我不知道为什么会这样（例如，在函数内部显示“alert()”）。我通过在updateOnTrafficMap函数中使用switch语句来解决这个问题，因此每分钟一次布局消失，并立即使用另一个timeOut（设置为1毫秒）重新出现。

function updateMap()  {
  // the following creates a Google Map with zoom level 10 and the LatLong coordinates
  // stated below
  var latlng = new google.maps.LatLng(52.053335, 4.917755);
  var myOptions = {
    zoom: 10,
    center: latlng,
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("google_map"), myOptions);
  updateTrafficOnMap(map, null, 1);
}

function updateTrafficOnMap(map, trafficLayer, on)
{
  if(on == 0) {
    trafficLayer.setMap(null);
    setTimeout(function() { updateTrafficOnMap(map, null, 1) }, 1) 
  }
  if(on == 1) {
    var trafficLayer2 = new google.maps.TrafficLayer();
    trafficLayer2.setMap(map);
    // after 300ms (or 5 minutes) update the traffic map
    setTimeout(function() { updateTrafficOnMap(map, trafficLayer2, 0)}, 300000)
  }
}

在文档加载时，您调用updateMap()函数，并且应该有一个id为“google_map”的DIV来显示地图。

- HTBR

---

我认为在 trafficLayer.setMap(null); 下面添加 trafficLayer = null; 是一个好主意，否则你会留下未使用和无法访问的 TrafficLayer 对象，垃圾回收可能无法移除它们。 - bbodenmiller

Answer 2

这对我有用：

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

- crb

---

我通过在三个浏览器（FF，IE，Ch）上设置相同的例程，并以10秒的刷新速率在科罗拉多州丹佛市的高峰期之前同时运行来进行了测试。其中一个浏览器我手动刷新。只有我手动刷新的那个浏览器保持了当前的交通状况。我可以看到新的红点出现在它上面。然后在其他浏览器上进行手动刷新，将它们带到正确的状态。 - Twelve24

我已经测试了上述内容并与被接受的答案进行了比较，但它并不起作用。 - bbodenmiller

Answer 3

在整个初始化过程中使用setInterval让我得到了所需的刷新效果。options.ts_google_map_traffic_refresh_milliseconds设置为您所需的毫秒数。

 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

- Twelve24

---

当你只需要重新加载交通时，重新加载整个地图有点过度。 - bbodenmiller