5
这个肯定涉及以前关于初始化期间地图显示的问题。然而，这里的问题是在地图应该已经初始化之后地图显示被设置为无。我的widow.onload的最后一行将地图设置为display：none;地图初始化应该在那时已经完成，但事实仍然存在，最终的调用导致了这个问题。Google Maps JS v3：地图显示：无;在地图初始化之后导致损坏的地图
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（）的结尾处;我得到这个...（正确）
既然问题被设置为none后，地图应该初始化地图显示茎，它会导致人们相信，地图初始化实际发生非syncronously。那么我怎么知道它何时完成，并且隐藏地图div是安全的？还有一个问题，为什么mini_map似乎依赖于main_map的可见性，而不是它自己的可见性？在Linux和Chrome上，我都得到了相同的结果。
任何帮助是帮助:)
跳过
更新：我改变setTimeout的最后通话（ “loadUserTable（）;”，1000）; 1秒就足以让事情发挥作用，但不是我想要的！由于@Jobsz验证这是已知问题，因此我将采取离屏初始化，并在需要显示时将地图移到适当位置，或者在短暂超时后将其隐藏并置于适当位置。
SOLUTION：通过@Guan（勾选答案）提供
我不想在地图初始化时可见。但是当用户选择该选项卡时，需要初始化并准备好。
地图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（）函数在正常的程序流程中调用，并且寿命很长。 :)
是的 - 屏幕外初始化是我原先也在考虑的事情。为你工作得好吗？ – Atticus 2011-05-08 22:55:44