传单地图未在选项卡式面板内正确显示 [英] Leaflet map not displayed properly inside tabbed panel

问题描述

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

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:

当我单击包含面板的选项卡时，地图顶部会出现一个灰色层.如果我拖动并移动地图，我会看到其他图块，但看不到初始图块.

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.

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

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.

此外，将地图放置在选项卡式面板之外效果很好.

Also, placing the map outside of the tabbed panel works great.

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

I tested in Firefox and Chrome, and both have the same issue.

我在 jsfiddle 中创建了一个测试以查看它实时":http://jsfiddle.net/jasalguero/C7Rp8/1/

I created a test in jsfiddle to see it "live": http://jsfiddle.net/jasalguero/C7Rp8/1/

非常感谢任何帮助！

推荐答案

这是一个完整的 hack 来自弄乱了 Leaflet.js 源代码，但它有效(至少在 jsFiddle 中)http://jsfiddle.net/C7Rp8/4/

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/

这个想法来自谷歌地图，当它的容器 div 被调整大小时调整大小"或重绘"地图.

The idea is from Google Maps, to "resize" or "redraw" the map when its container div is resized.

我所做的更改是:

将 id link3 添加到 HTML 中的小标签

add id link3 to the small tab in 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

The requestAniMFrame line is taken from trackResize in leaflet.js

从评论中更新:我使用了 map.invalidateSize(false);而不是 L.Util.requestAnimFrame(... 这似乎也有效.只是想我会指出这一点.不过答案很好！ – Herr Grumps

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

这篇关于传单地图未在选项卡式面板内正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！