javascript - 传单 map 在选项卡式面板内未正确显示

Question

我正在尝试使用 Leaflet.js 在 Twitter Bootstrap 的选项卡式面板内显示 map ，但表现方式很奇怪:

当我单击包含面板的选项卡时， map 顶部会出现一个灰色层。如果我拖动并移动 map ，我会看到其他图 block ，但看不到初始图 block 。

更奇怪的是，如果我调整浏览器的大小，突然间它可以正常工作，直到我再次加载，所以我猜是 css 的问题，但我找不到问题。

此外，将 map 放在选项卡式面板之外效果很好。

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

我在 jsfiddle 中创建了一个测试来“实时”查看它:http://jsfiddle.net/jasalguero/C7Rp8/1/

非常感谢任何帮助!

Answer 1

这是对 leaflet.js 源代码的彻底破解，但它有效(至少在 jsFiddle 中)http://jsfiddle.net/C7Rp8/4/

这个想法来自谷歌地图，在调整其容器 div 大小时“调整大小”或“重绘” map 。

我所做的修改是:

在HTML中的小标签中添加id link3

<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(... 这似乎也有效。只是想我会指出这一点。不过很好的答案! – Grumps 先生