将绝对定位的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的地图div中(例如10000)

请考虑以下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;
}