2

JQuery 和 OpenLayers 都相当新。一切都很顺利，直到我尝试使用 JQuery 的对话框类打开一个模式对话框。

该对话框工作正常，只是它出现在地图的某些元素下：

在此处输入图像描述

这在 Opera 和 Chrome 中都是一样的（其他未测试）。任何人都可以提出解决此问题的方法吗？谢谢。

编辑：我在这里创建了一个演示问题的小提琴。

HTML：

<body>
    <div id="map"></div>

    <div id="popup" title="Test">
        <p>Blah blah</p>
    </div>
</body>

Javascript：

var map;

$(function () {

    //init map
    map = new OpenLayers.Map('map', {});
    var wms = new OpenLayers.Layer.Google('Google Map Layer', { type: google.maps.MapTypeId.HYBRID });

    map.addLayer(wms);

    if (!map.getCenter()) {
        map.zoomToMaxExtent();
    }

    //init popup
    $("#popup").dialog({
        height: 400,
        width: 300,
        modal: true
    });
});​
4

2 回答 2

7

看起来如果您添加position:relative;到地图中，它会按预期工作。

#map { position:relative; width:200px; height:200px; }

例子

于 2012-10-26T11:39:17.393 回答
1

一切都是z-index为了你的元素。这是一个主要工作的小提琴（您只需要找到“使用条款”链接的类或 ID 并将其添加到下面的第一行）：http: //jsfiddle.net/GRVuZ/5/

.gmnoprint, .zolControlZoom, .olControlNoSelect {z-index:900 !important;}
#jpopup {z-index:1000;}
于 2012-10-26T11:38:52.750 回答