Question

您好我在这里使用移动地图演示：http://demo.qooxdoo.org/devel/mobileshowcase/index.html#%2Fmaps

我试图在地图页面的底部添加一个工具栏。它有效，但随后地图迅速覆盖了它。在查看DOM之后，看起来工具栏会添加到地图div中。

有没有办法让它出现在地图上而不是下面？此代码全部包含在Application.js文件中。

 var maps = test.page.Maps.getInstance();
 var manager = new qx.ui.mobile.page.Manager(false);
  manager.addDetail([
    maps
  ]);
  maps.show();


  var toolbar = this.__toolbar = new qx.ui.mobile.toolbar.ToolBar();
  maps.add(toolbar);

感谢您的帮助！

Answer 1

使用maps.add(toolbar)您将工具栏添加到地图中，这就是它被添加到地图div的原因。我想你必须通过page.Manager来向GUI添加单独的元素。您可能希望修改实现此目的的mobile tutorial，还包括从NavigationPage派生的小部件，如地图展示中所示。

Answer 2

看看： https://github.com/qooxdoo/qooxdoo/blob/master/application/mobileshowcase/source/class/mobileshowcase/page/Maps.js

此示例中有几个重要的事情。重写方法“_createContent”和“_createScrollContainer（）”。

NavigationPage默认创建一个iScroll容器，您可以在其中放置所有窗口小部件。但是OpenLayer div当然不是qooxdoo小部件。它有自己的滚动逻辑。这就是为什么，你必须覆盖这些方法。 OpenLayer的大部分样式都无法改变。 OpenLayer覆盖所有内容，因为它具有绝对定位。

但有一个解决方案：

在initalize（）方法中使用此方法

this.addAfterNavigationBar(widget);

通过

为您的小部件分配CSS类

 widget.addCssClass("your-class")

更改资源文件夹中的“styles.css”：

.your-class {
  z-index: 5000;
  position: absolute;
}

格雷茨克里斯托弗

Qooxdoo - 移动地图涵盖工具栏

2 个答案: