在选项卡式面板中未正确显示传单地图

Question

我正在尝试使用Leaflet.js在Twitter Bootstrap的标签面板中显示一个地图,但是表现得很奇怪:

当我单击包含面板的选项卡时,地图顶部会出现灰色图层.如果我拖动并移动地图,我会看到其他瓷砖,但不是最初的瓷砖.

更奇怪的是,如果我调整浏览器的大小,突然它完美运行,直到我再次重新加载,所以我猜是css的一个问题,但我找不到问题.

此外,将地图放在选项卡式面板之外也很有效.

我在Firefox和Chrome中测试过,两者都有同样的问题.

我在jsfiddle中创建了一个测试,看它"活着":http: //jsfiddle.net/jasalguero/C7Rp8/1/

任何帮助真的很感激!

Answer 1

搞乱leaflet.js源代码完全破解了它,但它起作用(至少在jsFiddle中)http://jsfiddle.net/C7Rp8/4/

这个想法来自谷歌地图,当它的容器div调整大小时,"调整大小"或"重绘"地图.

我所做的改变是:

将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(......这似乎也有效.只是想我会指出这一点.但是很棒的答案! - Herr Grumps

Answer 2

Bootstrap 3具有自定义命名空间事件,因此以前的答案可以使用:

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

参考:Bootstrap选项卡