Javascript 传单地图未在选项卡式面板中正确显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10762984/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Leaflet map not displayed properly inside tabbed panel
提问by jasalguero
I'm trying to use Leaflet.js to display a map inside a tabbed panel from Twitter Bootstrap, but is behaving in a strange way:
我正在尝试使用 Leaflet.js 在 Twitter Bootstrap 的选项卡式面板内显示地图，但行为方式很奇怪：
When I click on the tab containing the panel there is a gray layer on top of the map. If I drag and move the map I get to see other tiles, but not the initial ones.
当我单击包含面板的选项卡时，地图顶部有一个灰色层。如果我拖动并移动地图，我会看到其他图块，但看不到初始图块。
Even more strange is that if I resize the browser, suddenly it works perfectly, until I reload again, so I would guess is a problem with the css, but I cannot find the problem.
更奇怪的是，如果我调整浏览器的大小，突然它完美地工作，直到我再次重新加载，所以我猜是css的问题，但我找不到问题。
Also, placing the map outside of the tabbed panel works great.
此外，将地图放置在选项卡式面板之外效果很好。
I tested in Firefox and Chrome, and both have the same issue.
我在 Firefox 和 Chrome 中进行了测试，两者都有相同的问题。
I created a test in jsfiddle to see it "live": http://jsfiddle.net/jasalguero/C7Rp8/1/
我在 jsfiddle 中创建了一个测试以查看它“实时”：http: //jsfiddle.net/jasalguero/C7Rp8/1/
Any help is really appreciated!
任何帮助真的很感激！
回答by Tina CG Hoehr
It's a complete hack from messing with the leaflet.js source code, but it works (at least in jsFiddle) http://jsfiddle.net/C7Rp8/4/
这是一个完整的 hack 来自弄乱leaflet.js源代码，但它有效（至少在jsFiddle中）http://jsfiddle.net/C7Rp8/4/
The idea is from Google Maps, to "resize" or "redraw" the map when its container div is resized.
这个想法来自谷歌地图，在调整其容器 div 大小时“调整大小”或“重绘”地图。
The changes I made are:
我所做的改变是：
add id link3to the small tab in HTML
将 id 添加link3到 HTML 中的小标签
<a href="#lC" data-toggle="tab" id="link3">tab3</a>
add a listener to this tab inside $(function() {
在这个标签里面添加一个监听器 $(function() {
$("body").on('shown','#link3', function() {
L.Util.requestAnimFrame(map.invalidateSize,map,!1,map._container);
});
The requestAniMFrame line is taken from trackResize in leaflet.js
requestAniMFrame 行取自 Leaflet.js 中的 trackResize
Update from the comments: Hi, I used map.invalidateSize(false); instead of L.Util.requestAnimFrame(... and this also seems to work. Just thought I'd point this out. Great answer though! – Herr Grumps
从评论更新：嗨，我使用了 map.invalidateSize(false); 而不是 L.Util.requestAnimFrame(... 这似乎也有效。只是想我会指出这一点。不过答案很好！ – Herr Grumps
回答by youanden
Bootstrap 3 has custom namespaced events, and so previous answers would work with:
Bootstrap 3 具有自定义命名空间事件，因此以前的答案适用于：
$("body").on("shown.bs.tab", "#link3", function() {
map.invalidateSize(false);
});
Reference: Bootstrap Tabs
参考：Bootstrap 标签
