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/

这个想法是从谷歌地图，到＆＃34;调整大小＆＃34;或＆＃34;重绘＆＃34;调整容器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);
});