0

我有一个使用 openlayers 进行映射的 jquery-mobile/phonegap 应用程序。在使用地图的页面上,见下图,我在选择页脚菜单时遇到问题。

带地图的页面

例如,如果我选择 Home,应用程序将导航到捕获。这只发生在显示地图的页面上。我在 openlayers 中使用 map.render 函数,因为地图在多个屏幕之间共享。如果我删除渲染功能,菜单会按预期工作。

我添加了一个单击功能来查看有问题的单击的 x 位置,并注意 x 位置反映了导航到的页面菜单的位置,而不是单击的菜单。

菜单如下:

  <div class="menu" data-role="footer" data-position="fixed">
    <div data-role="navbar">
      <ul>
        <li>
          <a href="index.html"
             class="home-button"
             data-icon="custom">Home</a>
        </li>
        <li>
          <a href="map.html"
             class="map-button ui-btn-active"
             data-icon="custom">Map</a>
        </li>
        <li>
          <a href="capture.html"
             class="capture-button"
             data-icon="custom">Capture</a>
        </li>
        <li>
          <a href="download.html"
             class="download-button"
             data-icon="custom">Download</a>
        </li>
      </ul>
    </div>

如果我删除 data-role="footer" div,导航栏菜单将按预期工作。

注意:这已在仅使用 android 2.3.5 的三星设备上复制。我在带有 android 2.3.6、4+ 和我们测试过的所有其他型号的三星设备上运行良好。

使用:openlayers 1.12 jquery-mobile:1.2.0(也试过1.3.0)

4

1 回答 1

0

设置页脚的 z-index 解决了这个问题:

.ui-footer {
    z-index: 10000;
}
于 2013-02-26T17:55:49.160 回答