单张地图在标签面板内没有正确显示

我试图使用Leaflet.js在Twitter Bootstrap的标签面板中显示一个地图，但行为是一个奇怪的方式：

当我点击包含面板的选项卡时，地图顶部会有一个灰色图层。 如果我拖动和移动地图，我会看到其他瓷砖，但不是最初的。

更奇怪的是，如果我调整浏览器的大小，突然它的作品完美，直到我再次加载，所以我猜想是一个问题与CSS，但我找不到问题。

另外，将标签贴图放置在标签面板外面效果很好。

我在Firefox和Chrome中testing过，两者都有相同的问题。

我在jsfiddle中创build了一个testing来看它是否是“活的”： http : //jsfiddle.net/jasalguero/C7Rp8/1/

任何帮助真的很感激！

Answer 1

这是一个从leaflet.js源代码搞乱的彻底破解，但它的工作原理（至less在jsFiddle） http://jsfiddle.net/C7Rp8/4/

这个想法是从谷歌地图，以调整其大小的集装箱股份时，resize或“重绘”地图。

我所做的改变是：

将id link3添加到HTML中的小标签

 <a href="#lC" data-toggle="tab" id="link3">tab3</a> 

添加一个监听器到$(function() {

 $("body").on('shown','#link3', function() { L.Util.requestAnimFrame(map.invalidateSize,map,!1,map._container); }); 

requestAniMFrame行取自leaflet.js中的trackResize

从评论更新 ：嗨，我用map.invalidateSize（false）; 而不是L.Util.requestAnimFrame（…而且这也似乎工作，只是想我会指出这一点，虽然很好的答案！

Answer 2

引导3具有自定义命名空间事件，所以以前的答案可以用于：

 $("body").on("shown.bs.tab", "#link3", function() { map.invalidateSize(false); }); 

参考： Bootstrap选项卡