Google Maps JS v3：地图显示：无;地图初始化后导致地图损坏 [英] Google Maps JS v3: Map display: none; after map initialization causing corrupted map

问题描述

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

window.onload（）;函数...

  window.onload = function（）{
 changeTheme（me）; //现在就做，所以current_theme可以切换到Tab（）; 
 switchTabs（tab3）; //设置地图div可见
 initMaps（）; //地图初始化。包括代码。 
 loadFavoritePlaces（）; // asynch $ getJSON调用，添加标记。无论地图的条件如何，标记都会显示在适当的位置。 
 closePopup（images）; 
 closePopup（location）; //设置maps.mini_map显示：无;如果我们稍后loadUserTable（）会出现问题。否则OK。奇！ 
 closePopup（tweet）; 
 centerDiv（）; 
 document.title ='@'+ me.screen_name +' -  PithyTwits.com'; 
个用户[me.id_str] =我; 
 getPage（）; // asynch $ .getJSON加载推文。没什么大不了。 
 
 //将滚动事件处理程序添加到tweet_div 
 $（＃tweet_div）。scroll（function（）{
 var pos = $（this）[0]。 scrollHeight  -  $（this）.scrollTop（）; 
 if（pos！= prev_scroll）{//防止滚动函数触发两次
 prev_scroll = pos; 
 if（pos == $（this）.outerHeight（））{
 $（＃throbber）。fadeIn（）; 
 getPage（）; 
} 
} 
}） ; 
 
 loadUserTable（me.id_str）; 
 / * loadUserTable（）;调用switchTabs（tab1）;其中设置地图div显示：无; 
如果我对此进行注释，地图初始化完成正确，但我的'tab1'
没有正确填充。并且页面不在需要的'tab1'上开始。 * / 
 
 // end window.onload（）
} 
  

initMaps（）;函数...
$ b $ pre $ 函数initMaps（）{

//标记列表
地图.markers = new Object;

//可见性状态'
maps.markerStatus = new Object;
maps.markerStatus ['query'] = true;
maps.markerStatus ['tweet'] = true;
maps.markerStatus ['favorite'] = true;

//定义标记图片
maps.reticleImage = new google.maps.MarkerImage（'images / reticle.png'，
google.maps.Size（63，63 ），
新google.maps.Point（0,0），
...
删除简化后的声明
...
new google.maps .Point（0,0），
new google.maps.Point（1，13））;
maps.markerShape = {
类型：poly，
coords：[9,22,16,11,16,5,11,1,6,1,2,5， 2,11,9,22]
}

//设置地图选项
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
};

//初始化映射
maps.main_map = new google.maps.Map（document.getElementById（map_div），myOptions）;
maps.mini_map = new google.maps.Map（document.getElementById（mini_map），myOptions2）;

//默认地图中心标记
maps.mini_map_marker = new google.maps.Marker（{
位置：latlng2，
map：maps.mini_map，
图标：maps.favoriteMarker，
shadow：maps.markerShadow，
}）;
maps.reticleMarker =新的google.maps.Marker（{
位置：latlng，
map：maps.main_map，$ b $ shape：reticleShape，
图标：地图。 reticleImage，
}）;

//事件处理程序
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（））;}）;

//标记回答中@Guan提供的空闲事件侦听器。
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;
}）;

//初始化控件
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（）的结尾处;我得到这个......（正确）

由于问题源于地图显示在地图初始化之后被设置为无，因此会导致人们相信地图初始化实际上正在发生非syncronously。那么我怎么知道它何时完成，并且隐藏地图div是安全的？还有一个问题，为什么mini_map似乎依赖于main_map的可见性，而不是它自己的可见性？在Linux和Chrome浏览器中，我都能得到相同的结果。

任何帮助都是有帮助的:)

跳过

更新：我最后调用setTimeout（loadUserTable（）;，1000）; 1秒就足以让事情发挥作用，但不是我想要的！由于@Jobsz验证这是已知问题，因此我将采取离屏初始化，并在需要显示时将地图移动到位置，或者在短暂超时后隐藏并将其放置到位。

解决方案：由@ 关 a>（检查答案）

我不想在初始化期间看到地图。但是当用户选择该选项卡时，需要初始化并准备好。

地图div最初设置为...

  id =tab3_contentstyle =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（）函数在正常的程序流程中调用，并且寿命很长。 ：

函数（）{
$（'＃addstop'）。css（{
display：'none'，
left：'0'，
top：'0'
}）;
}）;

这个事件在地图完全加载和'空闲'后才会发生一次

This certainly touches on previous questions regarding map display during initialization. Yet the issue here is with map display being set to none after map should have already initialized. The last line of my widow.onload sets the map to display: none; The map initialization should have already completed by that time, but the fact remains, the final call is causing the problem.

window.onload(); function...

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...

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

If I call loadUserTable(); at the end of window.onload(); I get this... (munged)

If I don't call loadUserTable(); at the end of window.onload(); I get this... (correct)

Since the problem stems from the maps display being set to none after the maps should have initialized, it would lead one to believe that the map initialization is actually happening non-syncronously. So how do I know when it is finished, and it is safe to hide the maps div? And also there is the question of why the mini_map seems to be dependent on visibility of the main_map, rather than its own visibility? I get the same results in both Chrome and Firefox, on Linux.

Any help is help :)

Skip

UPDATE: I changed the final call to setTimeout("loadUserTable();", 1000); and 1 second is enough of a pause to let things work, but isn't what I want! Since @Jobsz verifies this is known issue, I'm going to resort to off screen initialization, and move the map into position either when needed for display, or hide it and put it in position after a short timeout.

SOLUTION: Provided by @Guan (Checked answer)

I did not want the map visible during initialization. But wanted it initialized and ready when the user chose that tab.

The map div is initially set thus...

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

That makes it visible, but offscreen to the left.

And then set a listener for the idle event in the map initialization...

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

That event fires once when the map is idle(ready). It hides the div and moves it into position on screen.

The loadUserTable() function is called in the normal program flow, and life is good. :)

解决方案

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

This event happens only once after the map is fully loaded and 'idle'

这篇关于Google Maps JS v3：地图显示：无;地图初始化后导致地图损坏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！