本文将带你了解WEBAPP开发自定义百度地图导航控件，希望本文对大家学WEBAPP有所帮助。

百度地图js版   的导航控件按钮，在webapp有几点问题

1 不好点击，也就是点不中

2   不能置灰，也就是说当缩小到最小的时候，按钮应该为灰色，反之放大到最大也该为灰色

基于以上2点，自定一下，其实很简单，目的在于可以自己来控制

代码如下

  1   /**    2      *@ NavControl    3      */    4     var NavControl =    5         /**  6            * NavControl    7          * @class     8          * @constructor    9          * @param {Map} map   地图的一个实例。   10          * @remark  11            *     12          */ 13           BMapLib.NavControl =   function (options) { 14               this.defaultAnchor = options.anchor; 15             this.defaultOffset = options.offset ||   new   BMap.Size(10,   10); 16             this.zoom_btn=null; 17             this.zoomout_btn=null; 18         }; 19  20  21         NavControl.prototype = new BMap.Control(); 22  23         NavControl.prototype.initialize   = function(map)   {   24             this.map = map; 25             var that = this; 26             map.addEventListener(‘zoomend‘, function () { 27                 if(that.map.getZoom()>=18){ 28                       that.removeClass(that.zoom_btn,‘blue_off‘); 29                       that.removeClass(that.zoom_btn,‘blue_disable‘); 30                       that.addClass(that.zoom_btn,‘blue_disable‘); 31                 }else if(that.map.getZoom()<=3){ 32                       that.removeClass(that.zoomout_btn,‘blue_off‘); 33                       that.removeClass(that.zoomout_btn,‘blue_disable‘); 34                       that.addClass(that.zoomout_btn,‘blue_disable‘); 35                 }else{ 36                       that.removeClass(that.zoomout_btn,‘blue_disable‘); 37                       that.removeClass(that.zoom_btn,‘blue_disable‘); 38                       that.addClass(that.zoom_btn,‘blue_off‘); 39                       that.addClass(that.zoomout_btn,‘blue_off‘); 40                   }   41             }); 42  43  44               var   container = document.createElement(‘div‘); 45               container.id=‘zoom-btn-container‘; 46  47               var   zoom_btn=this.zoom_btn =   document.createElement(‘div‘); 48             zoom_btn.className+=‘zoom_btn    zoom_btn_in‘; 49               zoom_btn.style.cssText += this.buildZoomBtnIn(); 50               zoom_btn.addEventListener(‘click‘,function(){ 51                 if(that.map.getZoom()<=18){ 52                       that.map.zoomIn(); 53                   }   54             }); 55               container.appendChild(zoom_btn); 56  57             var zin = document.createElement(‘div‘); 58             zin.className+=‘zin icon -plus‘; 59             zoom_btn.appendChild(zin); 60  61             var zoomout_btn =this.zoomout_btn=   document.createElement(‘div‘); 62               zoomout_btn.className+=‘zoom_btn blue_off zoom_btn_out‘; 63               zoomout_btn.addEventListener(‘click‘,function(){ 64                 if(that.map.getZoom()>3){ 65                       that.map.zoomOut(); 66                   }   67             }); 68               container.appendChild(zoomout_btn); 69  70             var zout = document.createElement(‘div‘); 71             zout.className+=‘zout icon -minus‘; 72               zoomout_btn.appendChild(zout); 73  74                75    76             var div=document.createElement(‘div‘);  77               div.appendChild(container); 78               this.map.getContainer().appendChild(div); 79             return div; 80           };   81    82    83    84    85    86           NavControl.prototype.buildZoomBtnIn=function(){ 87               var csstext   = []; 88             csstext.push(‘font-size: 11px‘); 89             csstext.push(‘line-height: 18px‘); 90             return csstext.join(‘;‘); 91           };   92    93           NavControl.prototype.buildZoomBtnOut=function(){ 94               var csstext   = []; 95             csstext.push(‘font-size: 11px‘); 96             csstext.push(‘line-height: 18px‘); 97             return csstext.join(‘;‘); 98           };   99 100         NavControl.prototype.hasClass   = function (obj, cls)   {101             return obj.className.match(new RegExp(‘(\\s|^)‘ + cls + ‘(\\s|$)‘));102           };103 104           NavControl.prototype.addClass = function (obj, cls) {105             if (!this.hasClass(obj, cls)) obj.className +=   " " + cls;106           };107 108           NavControl.prototype.removeClass = function (obj, cls) {109             if (this.hasClass(obj, cls)) {110                 var reg = new RegExp(‘(\\s|^)‘ + cls + ‘(\\s|$)‘);111                 obj.className =   obj.className.replace(reg, ‘ ‘);112               }113           };

其中css代码如下

1 @charset "UTF-8";@font-face { 2       font-family:   mwa;   3     src:   url(//map.baidu.com/mobile/simple/static/styleguide/icons/mwa_8077edf.eot); 4     src: url(//map.baidu.com/mobile/simple/static/styleguide/icons/mwa_f9e0ebd.woff)   format("woff"),url(//map.baidu.com/mobile/simple/static/styleguide/icons/mwa_77e7dd3.ttf)   format("truetype") 5 } 6  7 #zoom-btn-container { 8       -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.4); 9     background: rgba(255,255,255,.8);10     border-radius: 3px;11       background-image: url(//api0.map.bdimg.com/images/geolocation-control/mobile/gradient-bg-1x64.png)12 }13 14 .bl_btn {15     background: url(//s1.map.bdimg.com/mobile/simple/static/common/widget/apiext/images/result_bgs_b6bbaa6.png)   0 0 no-repeat;16     -webkit-background-size: 58px 160px17 }18 19 .zoom_btn {20     display: -webkit-box;21     -webkit-box-align: center;22       -webkit-box-pack:   center;23       -webkit-box-sizing: border-box24   }25 26 .zoom_btn {27       height: 40px;28       width: 48px;//   宽带加大在于容易触控到29 }30 31 .zoom_btn_in {32     margin-bottom: 5px;33       border-bottom: 1px solid   #ececec34 }35   36 .zoom_btn_on {37     background-color: #eee38 }39   40 .zin,.zout {41       width: 16px;42     height:   16px;43       font-size:   16px;44     color:   #686A5B45 }46   47 .blue_off.zin{48   opacity: .849 }50 .blue_off.zout{51     opacity: .852 }53 .blue_disable  {54       opacity: .3355 }56 57 .blue_disable {58       opacity: .3359 }60 61 .icon.-plus:before {62       content: "\e60d";63 }64 65 .icon.-minus:after {66       content: "\e60f";67 }68 69 .icon {70       display: inline-block;71       font-family:   mwa;72       font-weight: 400;73       font-style:   normal;74     font-variant: normal;75       line-height: 1;76       text-transform:   none;77       -webkit-font-smoothing:   antialiased;78       font-size:   16px;79     width:   1em;80     height:   1em;81 }

注意这里面的   “+”    “-”号使用了自定义的图标字体

使用

this.NavControl = new BMapLib.NavControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT});   that.Map.addControl(this.NavControl);

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！