单张地图在选项卡式面板中无法正确显示

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

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

同样，将地图放置在选项卡式面板之外也很有效。

我在Firefox和Chrome中进行了测试，但都存在相同的问题。

任何帮助都非常感谢！

回答：

完全摆脱了leaflet.js源代码，这是一个完整的技巧，但它可以工作（至少在jsFiddle中有效）

这个想法来自Google Maps，当其容器div调整大小时“调整”或“重绘”地图。

我所做的更改是：

link3在HTML的小标签中添加ID

<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

以上是 单张地图在选项卡式面板中无法正确显示 的全部内容， 来源链接： utcz.com/qa/403713.html

回到顶部