当前位置: 首页 > 面试题库 >

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

海岳
2023-03-14
问题内容

我正在尝试使用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



 类似资料:
  • 我正在尝试有一个使用IntelliJ GUI表单的UI。我创建了一个扩展JFrame的类,它只包含带有两个选项卡的JTabbedPane,每个选项卡都有一个JPanel。然后是扩展JPanel的2个其他类。但是,发射时没有面板显示。 我已经尝试使面板失效,重新涂漆和重新验证

  • 我正在建立一个基于JS的选项卡导航,但不知怎么选项卡内容没有正确显示。其思想是只显示活动状态的选项卡内容。 我只想让选项卡内容显示属于该选项卡的内容。 代码如下所示: null null 我找不到错误。非常感谢任何帮助。 预先默许 a

  • 我试图修改JavaFX8中的TabPage控件,使其向视口显示当前选定选项卡前面(右边)的一些选项卡,或者如果选定选项卡位于标题的最左边,它会显示当前选项卡前面附近的选项卡。 现在怎么样了: 我想让它表现得像: 当用户选择索引X的选项卡时,选项卡窗格标题显示附近的另外2或3个选项卡。 谢谢你的阅读。

  • 问题 在 Adobe Photoshop 中打开多个图像时,它们会以选项卡方式一起显示,而不是显示在单独的窗口中。 解决方案 解决方案 1:使图像在窗口中浮动。 要使某个图像在窗口中浮动,请选择“窗口”>“排列”>“在窗口中浮动”。 要使所有打开的图像在窗口中浮动,请选择“窗口”>“排列”>“使所有内容在窗口中浮动”。 注意:仅当图像窗口打开时,“窗口”>“排列”才可用。 解决方案 2:停用图像选

  • 嗨,我正在尝试创建一个模式内的地图。但是地图只显示了一部分。我尝试过在节点创建后使其无效,但它似乎不起作用。谢谢!

  • 注意: Adobe Muse 不再添加新增功能,并将于 2020 年 3 月 26 日停止支持。有关详细信息和帮助,请参阅 Adobe Muse 服务结束页面。 添加选项卡式面板构件 打开“构件库”面板(“窗口”>“构件库”)。展开面板,选择“选项卡式面板”构件。将构件从构件库拖至您的“设计”面板中。当您将选项卡式面板拖到页面上时,它会显示默认格式。 单击右侧顶部选项卡三次。第一次单击选择整个选项