51

我正在尝试使用 Leaflet.js 在 Twitter Bootstrap 的选项卡式面板中显示地图，但行为方式很奇怪：

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

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

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

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

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

非常感谢任何帮助！

4

2 回答 2

52

这是与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

于 2012-05-26T02:05:41.903 回答
20

Bootstrap 3 具有自定义命名空间事件，因此之前的答案适用于：

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

参考：引导选项卡

于 2014-06-17T17:05:03.270 回答