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

发布于 2024-10-30 05:14:03 字数 358 浏览 2 评论 0原文

我试图将静态图像图例放置在地图顶部 OpenLayers 地图的右下角。我尝试过使用绝对定位的 DIV，但它往往会被其他对象碰撞（即使 z 索引较高）。

有没有办法使用 OpenLayers API 来做到这一点？我注意到 OpenMap 有一个 Layer.ScreenOverlay 方法 (http://openspace.ordnancesurvey.co.uk /openspace/example7.html）这正是我所需要的，但是我可以找到的 OpenLayers 中不存在这样的方法。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

痴意少年 2024-11-06 05:14:03

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

您可以将属性更改为图像而不是文本：

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

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

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

I've encountered a similar problem, where I wanted to place a static image legend on an OpenLayers map. My solution was to use the attribution element http://dev.openlayers.org/examples/attribution.html (look at page source).

You can change the attribution to an image instead of text:

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

As for changing the position of the attribution on the map, you can change the css properties of div.olControlAttribution, e.g.

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

回复收藏 0 原文

咆哮 2024-11-06 05:14:03

它绝对应该能够将 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;
}

It should definitely work to absolutely position a div inside map div with higher z-index(10000 for example)

Consider following html and CSS code:

<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;
}

回复收藏 0 原文

~没有更多了~