Google地图刷新流量图层 [英] Google Maps refresh traffic layer

问题描述

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

In my Rails app, the background consists of a fullscreen div with Google Maps and a traffic layer. This is what gets called on page load:

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

updateMap函数在div元素'google_map'上创建一个Google Map：

The updateMap function creates a Google Map on the div element 'google_map':

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

最后一次调用是这个函数：

The last call is to this function:

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

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

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

Which is supposed to update the traffic layer every minute.

现在div在页面加载时正确加载，图层也加载。然而，这从来没有更新，所以没有实时的交通信息，除非你重新加载整个页面。

Now the div is loaded correctly on page load, the layer is loaded too. However, this never updates, so there's no real time traffic information unless you reload the whole page.

任何人都知道这个魔术词，以正确地刷新流量层？

Anyone knows the magic word to make the traffic layer refresh properly?

推荐答案

所以我找到了答案。显然，你不能在timeOut函数中使用新的覆盖来更新地图。我不知道为什么（正如在函数内部显示'alert（）'）。我使用updateOnTrafficMap函数中的switch语句解决了这个问题，因此每隔一分钟布局消失一次，并立即使用另一个timeOut（设置为1 ms）重新出现。
$ b

So I found the answer. Apparently you cannot update the map with a new overlay while inside the timeOut function. I do not know why exactly (as for instance a 'alert()' does show while inside the function). I solved it using a switch statement in the updateOnTrafficMap function, so that once every minute the layout disappears, and immediately reappears using another timeOut (set to 1 ms).

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当然要显示地图。

On document load you call the updateMap() function, and you should have a DIV with id "google_map" to display the map in of course.

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