Google Maps JS v3:地图显示:无; 地图初始化后导致地图损坏

Question

这肯定涉及以前有关初始化期间地图显示的问题.然而,这里的问题是在地图应该已经初始化之后将地图显示设置为无.我的widow.onload的最后一行将地图设置为display:none; 地图初始化应该已经在那时完成,但事实仍然是,最后的调用导致了问题.

在window.onload(); 功能...

window.onload = function(){
  changeTheme(me); // do it now so current_theme is avaible to switchTabs();
    switchTabs("tab3"); // sets map div visible
  initMaps(); // map initialization. code included.
  loadFavoritePlaces(); // asynch $getJSON call, adds markers. No matter the condition of map, markers appear in their proper locations.
  closePopup("images");
  closePopup("location"); // sets maps.mini_map display: none; Problems if we loadUserTable() later. Otherwise OK. Odd!
  closePopup("tweet");
  centerDiv();
  document.title = '@'+me.screen_name+' - PithyTwits.com';
  users[me.id_str] = me;
  getPage(); // asynch $.getJSON loads tweets. Not an issue.

  // Append a scroll event handler to tweet_div
  $("#tweet_div").scroll(function() {
    var pos = $(this)[0].scrollHeight - $(this).scrollTop();
    if(pos != prev_scroll){ // hack to prevent scroll function from firing twice
      prev_scroll = pos;
      if (pos == $(this).outerHeight()) {
        $("#throbber").fadeIn();
        getPage();
      }
    }
  });

  loadUserTable(me.id_str);
  /* loadUserTable(); calls switchTabs("tab1"); which sets map div display: none;
  if I comment this out the map initialization completes properly, but my 'tab1'
  doesn't get populated properly. And page doesn't start on 'tab1', which is required. */

// end window.onload()
}

initMaps(); 功能...

function initMaps() {

    // markers list
  maps.markers = new Object;

  // visibility status'
  maps.markerStatus = new Object;
  maps.markerStatus['query'] = true;
  maps.markerStatus['tweet'] = true;
  maps.markerStatus['favorite'] = true;

  // define marker images
  maps.reticleImage = new google.maps.MarkerImage('images/reticle.png',
    new google.maps.Size(63, 63),
    new google.maps.Point(0,0),
    ...
    Declarations removed to streamline post.
    ...
    new google.maps.Point(0,0),
    new google.maps.Point(1, 13));
  maps.markerShape = {
      type: "poly",
      coords: [9,22,16,11,16,5,11,1,6,1,2,5,2,11,9,22]
      }

  // setup map options
  var latlng = new google.maps.LatLng(39.520427, -94.770621);
  var latlng2 = new google.maps.LatLng(46.1912, -122.1944);
  var myOptions = {
    zoom: 3,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  var myOptions2 = {
    zoom: 13,
    center: latlng2,
    disableDefaultUI: true,
    draggable: false,
    keyboardShortcuts: false,
    mapTypeControl: false,
    scrollwheel: false,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };

  // initialize maps
  maps.main_map = new google.maps.Map(document.getElementById("map_div"), myOptions);
  maps.mini_map = new google.maps.Map(document.getElementById("mini_map"), myOptions2);

  // default map center markers
    maps.mini_map_marker = new google.maps.Marker({
    position: latlng2,
    map: maps.mini_map,
    icon: maps.favoriteMarker, 
    shadow: maps.markerShadow,
  });
  maps.reticleMarker = new google.maps.Marker({
    position: latlng,
    map: maps.main_map,
    shape: reticleShape,
    icon: maps.reticleImage,
  });

  // event handlers
  google.maps.event.addListener(maps.main_map, 'zoom_changed', mapZoomed);
  google.maps.event.addListener(maps.main_map, 'bounds_changed',
      function(){maps.reticleMarker.setPosition(maps.main_map.getCenter());});

  //idle event listener provided by @Guan in the marked answer.
  google.maps.event.addListenerOnce(maps.main_map, 'idle', function() {
      var div = document.getElementById("tab3_content"); 
      div.style.display = "none"; 
      div.style.position = "relative"; 
      div.style.left = "0px"; 
  });

  // initialize controls
  var controls = document.getElementById("visibility_controls");
  maps.main_map.controls[google.maps.ControlPosition.TOP_CENTER].push(controls);
  controls.style.display = "inline";
  var controls = document.getElementById("control_controls");
  maps.main_map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(controls);
  controls.style.display = "inline";
  var controls = document.getElementById("query_controls");
  maps.main_map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(controls);
  controls.style.display = "inline";
}

如果我调用loadUserTable(); 在window.onload()的末尾; 我明白了......(已经说过)

如果我不调用loadUserTable(); 在window.onload()的末尾; 我明白了......(正确)

由于问题源于地图应该初始化后地图显示被设置为无,这将导致人们相信地图初始化实际上是非同步发生的.那么我如何知道它何时完成,隐藏地图div是否安全？还有一个问题是为什么mini_map似乎依赖于main_map的可见性,而不是它自己的可见性？在Linux上,我在Chrome和Firefox上都获得了相同的结果.

任何帮助都是帮助:)

跳跃

更新:我将最终调用更改为setTimeout("loadUserTable();",1000); 1秒就足以让事情顺利进行,但不是我想要的!由于@Jobsz验证这是已知问题,我将采用屏幕外初始化,并在需要显示时将地图移动到位,或者在短暂超时后将其隐藏并将其放置到位.

解决方案:由@ Guan提供(检查答案)

我不想在初始化期间看到地图.但是当用户选择该选项卡时,希望它已初始化并准备就绪.

因此,map div最初设置为......

id="tab3_content" style="display: block;position: absolute; left: -1000px;"

这使它可见,但在屏幕左侧.

然后在地图初始化中为空闲事件设置一个监听器...

google.maps.event.addListenerOnce(maps.main_map, 'idle', function() {
  var div = document.getElementById("tab3_content"); 
  div.style.display = "none"; 
  div.style.position = "relative"; 
  div.style.left = "0px"; 
});

当地图空闲(准备好)时,该事件将触发一次.它隐藏了div并将其移动到屏幕上的位置.

loadUserTable()函数在正常的程序流程中调用,生活很好.:)

Answer 1

你可以试试吗

//map hold's a reference to your current map
google.maps.event.trigger(map, 'resize');

包含它的map/div变得可见之后？

Answer 2

google.maps.event.addListenerOnce(map, 'idle', function() {
    $('#addstop').css({
        display: 'none',
        left: '0',
        top: '0'
    });
});

此事件仅在地图完全加载并且"空闲"后发生一次