标签面板内 Leaflet 地图无法正确显示

Question

我试图使用Leaflet.js在Twitter Bootstrap的选项卡面板中显示地图，但它表现得很奇怪：

当我点击包含面板的选项卡时，会在地图上方出现灰色层。如果我拖动并移动地图，我可以看到其他瓷砖，但不是初始瓷砖。

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

同时，将地图放置在选项卡面板外也非常好用。

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

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

非常感谢任何帮助！

- jasalguero

Answer 1

这完全是从修改leaflet.js源代码得来的hack，但它能够工作（至少在jsFiddle上）http://jsfiddle.net/C7Rp8/4/

这个想法来自于Google Maps，即当包含地图的div大小改变时，“重新调整”或“重绘”地图。

我所做的更改是：

在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(...，这看起来也有效。只是想指出一下。不过非常好的答案！ - Herr Grumps

- Tina CG Hoehr

---

@Eamorr 刚看到你的评论，它让我笑了 :) - Tina CG Hoehr

嗨，我使用了map.invalidateSize(false)代替L.Util.requestAnimFrame(...)，这个方法好像也能正常工作。只是想指出来。虽然如此，你的回答非常好！ - Herr Grumps

这不就是标签的相对/绝对位置的问题吗？ - Augustin Riedinger

invalidateSize可以工作，但它会重新加载所有地图瓦片，这看起来并不好。有没有一种方法可以在Leaflet不重新加载瓦片的情况下实现这一点？ - Constant Meiring

这也帮助了我在一个没有使用Bootstrap而是Ratchet的应用程序中。感谢分享！ - Sebastian Sastre

Answer 2

Bootstrap 3有自定义的命名空间事件，因此以前的答案将与以下内容一起使用：

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

参考资料：Bootstrap 标签页

- youanden