概述：
今天给大家分享一个个人觉得比较好看的自己做的地图控件。
效果：
整体样式和鼠标经过
选中的控件以及对应的操作
实现的代码：
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
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="css/icon.css"><script src="jquery.min.js"></script><script src="map.js"></script></head><body><div id="infoBox" class="info-box"><div id="infoContent" class="info-box-content"></div><div id="infoClose"class="info-box-close"><span class="icon close"></span></div></div><div class="map-control"><div class="control-box"><a class="control-button top" isclick="false" href="#" title="" data-original-title="放大"><span class="icon zoomin"></span></a><a class="control-button bottom" isclick="false" href="#" title="" data-original-title="缩小"><span class="icon zoomout"></span></a></div><div class="control-box"><a class="control-button top" isclick="true" href="#" title="" data-original-title="图层"><span class="icon layer"></span></a><a class="control-button bottom" isclick="true" href="#" title="" data-original-title="图例"><span class="icon legend"></span></a></div></div></body></html>4、page.js
$(function(){$(".control-button").on("mouseover",function(){$("#entry").remove();var top = $(this).offset().top;var entry = $("<div />").attr("id","entry").addClass("entry").append($("<div />").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("");});})});源代码下载地址：
谁是谁生命的点缀。
