推迟谷歌地图初始化，直到显示引导标签

我已经研究了很多，似乎很多人在这里遇到了和我一样的问题，但我无法弄清楚如何修复它。

基本上我正在隐藏的bootstrap选项卡中初始化一个谷歌地图。 当我点击药丸使标签可见时，只显示地图的一小部分。

从我收集到的这是因为地图正在隐藏元素中初始化。 所以我需要在标签变得可见之后初始化地图。

我已经尝试过，我已经尝试过，但我无法正确使用代码。 任何帮助都将是宏伟的 – 我如何使地图仅在标签可见后执行？

提前致谢

 <div class="tab-pane map-pane" id="map"> 
 
 
 
 
    function initialize() { var mapOptions = { center: new google.maps.LatLng(22.39813,114.10943), zoom: 8 }; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); } google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

http://bootply.com/102479

在地图选项卡链接中添加ID，以便更容易识别。 显示相应的选项卡内容时触发地图resize事件。

这样，地图仅初始化一次，而前一个答案不是这种情况。

请注意，您需要在initialize函数之外定义map变量。

Answer 2

您应该能够将处理程序附加到Bootstrap选项卡show事件。

 $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { initialize(); }); 

工作演示： http ： //bootply.com/102241

Answer 3

 $('#myTab a[href="#location"]').on('shown.bs.tab', function (e) { initialize(); }); 

Answer 4

 $('#myTab a[href="#location"]').one('shown.bs.tab', function (e) { initialize(); }); 

使用.one（）而不是.on（） 。 这样可以防止一次又一次地重新加载地图;）

Answer 5

我试图让它以每个标签点击为中心..但似乎需要每次初始化…

@MrUpsidown任何其他方式我们可以居中实际位置而不是每次都初始化？

可能解决..
https://stackoverflow.com/a/25347742/3752338

Answer 6

Bootstrap选项卡（以及轮播和模态）最初设置为不显示，直到它们变为活动状态，因此地图的父元素的高度/宽度为0。

我和你的Bootstrap3有同样的问题。 最后我最终得到了简单的CSS解决方案。

 .tab-content.tab-pane, .tab-pane { /* display: none; */ display: block; visibility: hidden; position: absolute; } .tab-content.active, .tab-content .tab-pane.active, .tab-pane.active { /* display: block; */ visibility: visible; position: static; } 

Answer 7

这可能会有所帮助，不需要JavaScript技巧。

 .tab-content.tab-pane, .tab-pane { /* display: none; */ display: block; visibility: hidden; position: absolute; } .tab-content.active, .tab-content .tab-pane.active, .tab-pane.active { /* display: block; */ visibility: visible; position: static; } 

https://stackoverflow.com/a/32551984/3072600