传单地图未在选项卡式面板内正确显示
Posted
技术标签:
【中文标题】传单地图未在选项卡式面板内正确显示【英文标题】:Leaflet map not displayed properly inside tabbed panel 【发布时间】:2012-06-01 13:00:26 【问题描述】:我正在尝试使用 Leaflet.js 在 Twitter Bootstrap 的选项卡式面板中显示地图,但行为方式很奇怪:
当我单击包含面板的选项卡时,地图顶部有一个灰色层。如果我拖动并移动地图,我会看到其他图块,但看不到最初的图块。
更奇怪的是,如果我调整浏览器大小,突然它可以正常工作,直到我再次重新加载,所以我猜是css有问题,但我找不到问题。
此外,将地图放置在选项卡式面板之外效果很好。
我在 Firefox 和 Chrome 中测试过,两者都有同样的问题。
我在 jsfiddle 中创建了一个测试以查看它“实时”:http://jsfiddle.net/jasalguero/C7Rp8/1/
非常感谢任何帮助!
【问题讨论】:
【参考方案1】:这是对leaflet.js 源代码的完全破解,但它可以工作(至少在jsFiddle 中)http://jsfiddle.net/C7Rp8/4/
这个想法来自谷歌地图,当它的容器 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
来自 cmets 的更新:嗨,我使用了 map.invalidateSize(false);而不是 L.Util.requestAnimFrame(... 这似乎也有效。只是想我会指出这一点。不过很好的答案!-Herr Grumps
【讨论】:
效果很好!所以这是隐藏 div 中加载的所有地图的常见问题? 我真的只知道Google Maps API,所以我不能说其他的地图实现,例如还有Openlayers/OpenStreetMap。在这种情况下,我很幸运重绘策略奏效了:) @Eamorr 刚看到你的评论,我的脸上露出了笑容:) 嗨,我使用了 map.invalidateSize(false);而不是 L.Util.requestAnimFrame(... 这似乎也有效。只是想我会指出这一点。不过答案很好! 这不是标签的相对/绝对位置的问题吗?【参考方案2】:Bootstrap 3 具有自定义命名空间事件,因此之前的答案适用于:
$("body").on("shown.bs.tab", "#link3", function()
map.invalidateSize(false);
);
参考:Bootstrap Tabs
【讨论】:
以上是关于传单地图未在选项卡式面板内正确显示的主要内容,如果未能解决你的问题,请参考以下文章
JAVA Swing - 另一个卡片面板上的卡片面板上的选项卡式面板 setSelectedIndex()