自定义百度地图导航控件

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

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

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

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

代码如下

/**
     *@ NavControl
     */
    var NavControl =
        /**
         * NavControl
         * @class 
         * @constructor
         * @param {Map} map 地图的一个实例。
         * @remark 
         *    
         */
        BMapLib.NavControl = function (options) {
            this.defaultAnchor = options.anchor;
            this.defaultOffset = options.offset || new BMap.Size(10, 10);
            this.zoom_btn=null;
            this.zoomout_btn=null;
        };


        NavControl.prototype = new BMap.Control();

        NavControl.prototype.initialize = function(map) {
            this.map = map;
            var that = this;
            map.addEventListener('zoomend', function () {
                if(that.map.getZoom()>=18){
                    that.removeClass(that.zoom_btn,'blue_off');
                    that.removeClass(that.zoom_btn,'blue_disable');
                    that.addClass(that.zoom_btn,'blue_disable');
                }else if(that.map.getZoom()<=3){
                    that.removeClass(that.zoomout_btn,'blue_off');
                    that.removeClass(that.zoomout_btn,'blue_disable');
                    that.addClass(that.zoomout_btn,'blue_disable');
                }else{
                    that.removeClass(that.zoomout_btn,'blue_disable');
                    that.removeClass(that.zoom_btn,'blue_disable');
                    that.addClass(that.zoom_btn,'blue_off');
                    that.addClass(that.zoomout_btn,'blue_off');
                }
            });


            var container = document.createElement('div');
            container.id='zoom-btn-container';

            var zoom_btn=this.zoom_btn = document.createElement('div');
            zoom_btn.className+='zoom_btn  zoom_btn_in';
            zoom_btn.style.cssText += this.buildZoomBtnIn();
            zoom_btn.addEventListener('click',function(){
                if(that.map.getZoom()<=18){
                    that.map.zoomIn();
                }
            });
            container.appendChild(zoom_btn);

            var zin = document.createElement('div');
            zin.className+='zin icon -plus';
            zoom_btn.appendChild(zin);

            var zoomout_btn =this.zoomout_btn= document.createElement('div');
            zoomout_btn.className+='zoom_btn blue_off zoom_btn_out';
            zoomout_btn.addEventListener('click',function(){
                if(that.map.getZoom()>3){
                    that.map.zoomOut();
                }
            });
            container.appendChild(zoomout_btn);

            var zout = document.createElement('div');
            zout.className+='zout icon -minus';
            zoomout_btn.appendChild(zout);

            

            var div=document.createElement('div'); 
            div.appendChild(container);
            this.map.getContainer().appendChild(div);
            return div;
        };





        NavControl.prototype.buildZoomBtnIn=function(){
            var csstext = [];
            csstext.push('font-size: 11px');
            csstext.push('line-height: 18px');
            return csstext.join(';');
        };

        NavControl.prototype.buildZoomBtnOut=function(){
            var csstext = [];
            csstext.push('font-size: 11px');
            csstext.push('line-height: 18px');
            return csstext.join(';');
        };

        NavControl.prototype.hasClass = function (obj, cls) {
            return obj.className.match(new RegExp('(\s|^)' + cls + '(\s|$)'));
        };

        NavControl.prototype.addClass = function (obj, cls) {
            if (!this.hasClass(obj, cls)) obj.className += " " + cls;
        };

        NavControl.prototype.removeClass = function (obj, cls) {
            if (this.hasClass(obj, cls)) {
                var reg = new RegExp('(\s|^)' + cls + '(\s|$)');
                obj.className = obj.className.replace(reg, ' ');
            }
        };

其中css代码如下

@charset "UTF-8";@font-face {
    font-family: mwa;
    src: url(http://map.baidu.com/mobile/simple/static/styleguide/icons/mwa_8077edf.eot);
    src: url(http://map.baidu.com/mobile/simple/static/styleguide/icons/mwa_f9e0ebd.woff) format("woff"),url(http://map.baidu.com/mobile/simple/static/styleguide/icons/mwa_77e7dd3.ttf) format("truetype")
}

#zoom-btn-container {
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
    background: rgba(255,255,255,.8);
    border-radius: 3px;
    background-image: url(http://api0.map.bdimg.com/images/geolocation-control/mobile/gradient-bg-1x64.png)
}

.bl_btn {
    background: url(http://s1.map.bdimg.com/mobile/simple/static/common/widget/apiext/images/result_bgs_b6bbaa6.png) 0 0 no-repeat;
    -webkit-background-size: 58px 160px
}

.zoom_btn {
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -webkit-box-sizing: border-box
}

.zoom_btn {
    height: 40px;
     48px;// 宽带加大在于容易触控到
}

.zoom_btn_in {
    margin-bottom: 5px;
    border-bottom: 1px solid #ececec
}

.zoom_btn_on {
    background-color: #eee
}

.zin,.zout {
     16px;
    height: 16px;
    font-size: 16px;
    color: #686A5B
}

.blue_off.zin{
  opacity: .8
}
.blue_off.zout{
  opacity: .8
}
.blue_disable  {
    opacity: .33
}

.blue_disable {
    opacity: .33
}

.icon.-plus:before {
    content: "e60d";
}

.icon.-minus:after {
    content: "e60f";
}

.icon {
    display: inline-block;
    font-family: mwa;
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
     1em;
    height: 1em;
}

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

使用

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