Google Maps refresh traffic layer

问题

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

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.

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?

回答1:

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

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.

回答2:

This worked for me:

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

回答3:

A setInterval over the whole initialize routine got me the refreshing that I desired. options.ts_google_map_traffic_refresh_milliseconds is set to the milliseconds you desire.

 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

来源：https://stackoverflow.com/questions/7659072/google-maps-refresh-traffic-layer