Google Maps обновляет слой трафика

Question

В моем приложении Rails фон состоит из полноэкранного div с Google Maps и слоя трафика.Вот что вызывается при загрузке страницы:

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

Функция updateMap создает карту Google на элементе div '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);    
}

Последний вызов этой функции:

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

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

Что должно обновлять слой трафика каждую минуту.

Теперь div загружается правильно при загрузке страницы, слой также загружается.Однако это никогда не обновляется, поэтому информация о трафике в реальном времени отсутствует, если вы не перезагрузите всю страницу.

Кто-нибудь знает волшебное слово, позволяющее корректно обновлять слой трафика?

Answer 1

Итак, я нашел ответ. По-видимому, вы не можете обновить карту с новым наложением, находясь внутри функции timeOut. Я не знаю, почему именно (как, например, «alert ()» отображается внутри функции). Я решил это с помощью оператора switch в функции updateOnTrafficMap, так что раз в минуту макет исчезает и сразу же появляется снова, используя другой 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 (), и у вас должен быть DIV с идентификатором "google_map" для отображения карты, конечно.

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

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