保持Google Maps v3地图隐藏，在需要时显示

有没有一种方法可以防止Google Maps（JS，v3）地图从一开始就显示出来？我正在做一些预处理，并希望显示我的'正在加载'微调框，直到一切都很顺利（更雄辩地说，隐藏地图 - 例如容器div - 直到所有预处理完成 - 在这一点，显示地图）。保持Google Maps v3地图隐藏，在需要时显示

连接地图的idle事件并没有太大的帮助，因为当该事件发生时已经显示地图。

我知道div获得通过加载后GMaps直列风格的容器，我的第一个想法是，以清除style属性（同时听idle事件），而是看是否有办法这将是有趣创建地图并在所有预处理完成之前不显示它。

也许通过使用new google.maps.Map构造函数或MapOption的参数？

对此有何看法？

预先感谢您！

来源

2010-07-29 Dr1Ku

我已经使用了$（“＃ attr（“style”，“position：relative; visibility：hidden”）trick，works。 – Dr1Ku 2010-07-29 09:22:46

正如Dr1Ku所说。将地图渲染为不可见的div，然后在第一个空闲事件中显示div。一定要使用addListenerOnce。 – CrazyEnigma 2010-07-29 16:15:16

还记得打电话：

google.maps.event.trigger(map, 'resize');

，如果你已经改变了<div>的大小。 A display:none<div>没有大小。

来源

2010-08-05 07:30:23 skarE

这只是我的一个部分解决方案。我还必须调用'map.fitBounds（bounds）;'边界是正确的LatLngBounds对象。 – matt 2012-02-14 00:16:50

谢谢！它像一个魅力一样工作！ – aakashbhowmick 2012-12-18 17:06:51

此外，还可以使用“panTo（位置）”重新定位地图。 – dtanders 2015-09-14 16:07:52

更好的办法：

gmap.redraw = function() { 
    gmOnLoad = true; 
    if(gmOnLoad) { 
     google.maps.event.trigger(gmap, "resize"); 
     gmap.setCenter(gmlatlng); 
     gmOnLoad = false; 
    } 
}

，并在显示click事件：

$("#goo").click(function() { 
    if ($("#map_canvas").css("display") == "none") { 
    $("#YMapsID").toggle(); 
    $("#map_canvas").toggle(); 
    if (gmap != undefined) { 
     gmap.redraw(); 
    } 
    } 
});

来源

2011-02-22 13:00:05

看起来不错，感谢您的输入！ – Dr1Ku 2011-02-22 21:37:51

我认为这个临时解决方案总比没有好。 – 2011-03-03 18:30:07

取决于你在做什么其他posibility可能有你设置为true多个布尔变量时，每道工序完成。

例如：

，如果您有要等待的地理编码服务运行，你可以有一个变种叫 GeoState

，并在地理编码集GeoState的结果部分为真，然后有一个定时功能检查所有的服务是否已经返回true，当他们有，使地图可见。

来源

2011-04-19 09:28:37 idea

这适用于我。我正在使用JQuery库。

$(document).ready(function(){ 
    $('#Checkbox').click(function(){ 
     $('#googleMapDiv').toggle(); 
     initialize(); // initialize the map 
    }); 
});

来源

2011-10-12 08:23:22

嘿加百列。感谢这个非常简单而有效的解决方案。奇迹般有效！ – Enes 2013-03-29 03:52:10

请注意，这可能会每次重新加载地图，并且使用地图API v3时，您可能会每次加载地图元素的次数限制。 – Simon 2013-12-30 16:33:45

或者你可以用css visablility或css opacity来隐藏它。

$("#GoogleMap").css({ opacity: 0, zoom: 0 }); 
initialize(); 

google.maps.event.addListener(map,"idle", function(){ 
    $('#Loader').hide(); 
    $("#GoogleMap").css({ opacity: 1, zoom: 1 }); 
});

来源

2012-12-11 11:01:39 Tom

不透明度：0做的伎俩，我试图显示：无，并没有很好的结果 – 2013-07-05 17:11:48

这工作对我很好，我使用jquery标签

setTimeout(function() { 
     google.maps.event.trigger(map, "resize"); 
     map.setCenter(new google.maps.LatLng(default_lat, default_lng)); 
     map.setZoom(default_map_zoom); 
    }, 2000);

OM此链接https://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

来源

2014-03-09 17:28:32

这将工作

google.maps.event.addListener(map, "idle", function() 
    { 
     google.maps.event.trigger(map, 'resize'); 
    });

来源

2016-06-28 09:02:04 Geetesh

保持Google Maps v3地图隐藏，在需要时显示

回答

相关问题