Javascript 活页地图未在选项卡式面板内正确显示

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

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

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

此外，将地图放置在选项卡式面板之外也非常有效

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

我在JSFIDLE中创建了一个测试，以“实时”查看它：

---

非常感谢您的帮助

这是一次彻底的黑客攻击，因为它破坏了传单.js源代码，但它可以工作（至少在JSFIDLE中是这样）

这个想法来源于GoogleMaps，当它的容器div被调整时，“调整”或“重画”地图

我所作的改动是：

将id

link3

添加到HTML中的小选项卡

<a href="#lC" data-toggle="tab" id="link3">tab3</a>

requestAniMFrame线取自ployate.js中的trackResize

---

从评论中更新：嗨，我使用了map.invalidateSize（false）；而不是L.Util.requestAnimFrame（…这似乎也能起作用。我想我会指出这一点。不过答案很好！–Herr Grumps

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

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

---

参考资料：

效果很好！所有加载到隐藏div中的地图都有一个常见问题？我只知道Google maps API，所以我不能说其他地图实现，例如还有Openlayers/OpenStreetMap。在这种情况下，我很幸运重画策略奏效：）@Eamorr刚刚看到你的评论，它使我的脸上露出微笑：）嗨，我用了地图。无效化（假）；而不是L.Util.requestAnimFrame（…这似乎也很有效。我想我会指出这一点。不过答案很好！这不是选项卡的相对/绝对位置问题吗？

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