将绝对定位的DIV添加到OpenLayers Map的底部？

Question

我正在尝试将静态图片图例放置在地图顶部的OpenLayers地图的右下角。我尝试使用绝对定位的DIV，但它往往被其他物体碰撞（即使是高z-index）。

有没有办法使用OpenLayers API执行此操作？我注意到OpenMap有一个Layer.ScreenOverlay方法（http://openspace.ordnancesurvey.co.uk/openspace/example7.html），这正是我所需要的，但我找不到OpenLayers中没有这样的方法。

Answer 1

我遇到过类似的问题，我想在OpenLayers地图上放置一个静态图片图例。我的解决方案是使用归因元素http://dev.openlayers.org/examples/attribution.html（查看页面源代码）。

您可以将归因更改为图片而不是文字：

'attribution': "<img src='myimage.jpg'/>"

至于更改地图上属性的位置，您可以更改div.olControlAttribution的css属性，例如

    div.olControlAttribution {
        left:10em;
        top:10em;
    }

Answer 2

绝对可以将div放在具有更高z-index（例如10000）

的map div中

请考虑以下html和CSS代码：

<div id="map" style="height:100%">
    <div id="legend"></div>
</div>

#legend{
    position:absolute; 
    right:10px; 
    bottom:10px; 
    z-index:10000; 
    width:100px; 
    height:100px; 
    background-color:#FFFFFF;
}