共享个地图控件的样式

概述：

今天给大家分享一个个人觉得比较好看的自己做的地图控件。

效果：

整体样式和鼠标经过

选中的控件以及对应的操作

实现的代码：

1、icon.css

.icon{display:inline-block;width:20px;height:20px;background:transparent url(sprite.png) no-repeat 0 0;text-indent:-9999px;overflow:hidden;margin: 7px;
 }
 .icon.zoomin{background-position:-40px 0;
 }
 .icon.zoomout{background-position:-60px 0;
 }
 .icon.geolocate{background-position:-80px 0;
 }
 .icon.layer{background-position:-100px 0;
 }
 .icon.legend{background-position:-120px 0;
 }
 .icon.share{background-position:-140px 0;
 }
 .icon.clipboard{background-position:-160px 0;
 }
 .icon.link{background-position:-180px 0;
 }
 .icon.close{background-position:-200px 0;
 }
 .icon.close:hover{cursor: pointer;background-position:-200px -20px;
 }

2、style.css

html,body,ul,ol,li,form,fieldset,legend,h1,h2,h3,h4,h5,h6,p,input {border:0;margin:0;padding:0;background: #ddd;font:12px/20px "Microsoft YaHei";text-align: left;
 }
 .info-box{position: absolute;bottom: 0px;left: 0px;height:120px;display: none;width: 100%;background: #f2f2f2;border-top:solid rgba(0,0,0,0.6) 1px;
 }
 .info-box-content{padding: 5px 8px;
 }
 .info-box-close{position: absolute;top: 0px;right: 0px;
 }
 .map-control{margin-top: 8px;position:absolute;top: 20px;right: 30px;border-radius:4px;
 }
 .control-box{margin-top: 10px;
 }
 .control-button{display:block;height:35px;width:35px;background-color:rgba(0,0,0,0.6);outline:none;
 }
 .control-button:hover {background-color:#000;
 }
 .control-button.disabled {background-color:rgba(0,0,0,0.5);cursor:default;
 }
 .control-button.active {background-color:#9ed485;
 }
 .control-button.single{border-radius:4px;
 }
 .control-button.top{border-radius:4px 4px 0 0;
 }
 .control-button.center{border-radius:0;
 }
 .control-button.bottom{border-radius:0 0 4px 4px;
 }
 .entry{position: absolute;margin-left: 20px;margin-top:20px;width:30px;background:rgb(88,88,88);;padding:4px 6px;/*设置圆角*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;color: #ffffff;text-align: center;
 }
 /*右三角*/
 .entry-trangle-right{position:absolute;top:6px;right:-5px;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid rgb(88,88,88);
 }
 

3、page.html

4、page.js

$(function(){$(".control-button").on("mouseover",function(){$("#entry").remove();var top = $(this).offset().top;var entry = $("
").attr("id","entry").addClass("entry").append($("
").addClass("entry-trangle-right")).append($(this).attr("data-original-title")).css("top",(top-40)+"px").css("right","40px").appendTo($(".map-control"));});$(".control-button").on("mouseout",function() {$("#entry").remove();});$(".control-button").on("click",function(){if($(this).attr("isclick")==="true") {var cls = $(this).attr("class");if(cls.indexOf("active") > 0){$(this).removeClass("active");$("#infoBox").animate({height:"hide"},"slow",null,function(){$("#infoContent").html("");});}else{$(".control-button").removeClass("active");$(this).addClass("active");var title = $(this).attr("data-original-title");$("#infoBox").animate({height:"show"},"slow",null,function(){$("#infoContent").html("").append(title);});}}});$("#infoClose").on("click",function(){$(".control-button").removeClass("active");$("#infoBox").animate({height:"hide"},"slow",null,function(){$("#infoContent").html("");});})
 });

源代码下载地址： http://download.csdn.net/detail/gisshixisheng/9008937