单张地图没有标签面板

我试图用Leaflet.js显示地图从Twitter的引导选项卡式面板内，但在一个陌生的方式表现中正确显示包含面板的地图顶部有一个灰色图层。如果我拖动和移动地图，我会看到其他瓷砖，但不是最初的瓷砖。单张地图没有标签面板

更奇怪的是，如果我调整浏览器的大小，突然它会完美运行，直到我再次加载，所以我猜测是CSS的问题，但我找不到问题。

此外，放置在标签面板外的地图效果很好。

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

我的jsfiddle创建了一个测试，看看它“活”：http://jsfiddle.net/jasalguero/C7Rp8/1/

任何帮助，非常感谢！

2012-05-26 jasalguero

这是从与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线取from trackResize in leaflet.js

从评论更新：嗨，我用map.invalidateSize（false）;而不是L.Util.requestAnimFrame（...这似乎也工作，只是认为我指出了这一点，但很好的回答！ - 先生Grumps

2012-05-26 02:05:41

这工作非常大，所以它在隐藏层加载的所有地图的共同课题 – jasalguero

我真的只知道谷歌地图API，所以我不能说！？其他的地图实现，例如也有Openlayers/OpenStreetMap。在这种情况下，我很幸运，重绘的策略工作:) –

对于这篇文章，感谢你不够。真的有帮助！ – Eamorr

引导3具有自定义名称空间事件，所以以前的答案会一起工作：

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

2014-06-17 17:05:03 youanden

回答