有时候项目里涉及到地图操作功能时,我们总是希望将这些功能都集成到一个工具条上去,这样用户操作起来更加方便,界面看起来的话也更加整洁。
效果图如下:
主要代码:
布局文件Toolbar.html:
<ul class = "horizontal-toolbar">
<li><img src="assets/icons/pan.png" title="平移"></li>
<li><img src="assets/icons/zoom_in.png" title="放大"></li>
<li><img src="assets/icons/zoom_out.png" title="缩小"></li>
<li><img src="assets/icons/default.png" title="默认视图"></li>
<li><img src="assets/icons/distance.png" title="测量距离"></li>
<li><img src="assets/icons/area.png" title="测量面积"></li>
<li><img src="assets/icons/clear.png" title="清除图层"></li>
<li><img src="assets/icons/layers.png" title="图层控制"></li>
<li class="no-border"><img src="assets/icons/legend.png" title="图例"></li>
</ul>
样式表Toolbar.css:
ul,li{
padding: 0;
margin: 0;
list-style: none;
}
/*工具栏样式*/
.vertical-toolbar{/*竖向*/
position: absolute;
top: 10px;
right: 10px;
height: 389px;
width: 42px;
overflow: hidden;
background-color: #fff;
border-radius: 8px;
-moz-box-shadow: 6px 6px 5px #cccccc;
-webkit-box-shadow:6px 6px 5px #cccccc;
box-shadow: 6px 6px 5px #cccccc;
}
.vertical-toolbar>li{
box-sizing: content-box;
height: 40px;
width: 26px;
margin: 0 auto;
border-bottom: 2px solid #f5f5f5;
cursor: pointer;
position: relative;
float: none;
}
.vertical-toolbar>li.no-border{
border: 0;
}
.horizontal-toolbar>li>img,.vertical-toolbar>li>img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
width: auto;
}
.horizontal-toolbar{/*横向*/
position: absolute;
top: 20px;
right: 10px;
height: 42px;
width: 421px;
overflow: hidden;
background-color: #fff;
border-radius: 8px;
-moz-box-shadow: -6px 6px 5px #cccccc;
-webkit-box-shadow:-6px 6px 5px #cccccc;
box-shadow: -6px 6px 5px #cccccc;
}
.horizontal-toolbar>li{
float: left;
position: relative;
height: 26px;
width: 41px;
border-right: 2px solid #f5f5f5;
margin: 8px 0 0 0;
cursor: pointer;
}
.horizontal-toolbar>li.no-border{
border: 0;
width: 40px;
}