好看的地图组件图例图层样式
Tags: /计算机文档/网页制作/
Date Created:
很多时候，百度地图，谷歌地图，OpenStreetMap也好，如果要在地图上显示一个图例图层，需要用一个DIV绝对定位浮在MAP控件上。
下面是一个比较好看的div样式:
.map-control-legend {
max-height: 500px;
overflow: auto;
background: rgb(38,38,38);
padding: 8px;
opacity: 0.7;
color: #ffffff;
font-size: 14px;
border-radius: 6px;
text-align:left;
position:absolute;
right: 0%;
bottom: 0%;
margin: 8px;
z-index:999;
}下面是效果：
<div class="map-control-legend"><table style="margin-left:8px">
<tr><th>图例</th><th>说明</th></tr>
<tr><td><img class="legend" src="pic/tower.png" /></td><td>杆塔</td></tr>
<tr><td><img class="legend" src="pic/20.png" /></td><td>离线球机</td></tr>
<tr><td><img class="legend" src="pic/21.png" /></td><td>在线球机</td></tr>
<tr><td><img class="legend" src="pic/11.png" /></td><td>在线枪机</td></tr>
<tr><td><img class="legend" src="pic/10.png" /></td><td>离线枪机</td></tr>
</table>
</div>