百度地图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(http://map.baidu.com/mobile/simple/static/styleguide/icons/mwa_8077edf.eot);
4 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")
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(http://api0.map.bdimg.com/images/geolocation-control/mobile/gradient-bg-1x64.png)
12 }
13
14 .bl_btn {
15 background: url(http://s1.map.bdimg.com/mobile/simple/static/common/widget/apiext/images/result_bgs_b6bbaa6.png) 0 0 no-repeat;
16 -webkit-background-size: 58px 160px
17 }
18
19 .zoom_btn {
20 display: -webkit-box;
21 -webkit-box-align: center;
22 -webkit-box-pack: center;
23 -webkit-box-sizing: border-box
24 }
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 #ececec
34 }
35
36 .zoom_btn_on {
37 background-color: #eee
38 }
39
40 .zin,.zout {
41 width: 16px;
42 height: 16px;
43 font-size: 16px;
44 color: #686A5B
45 }
46
47 .blue_off.zin{
48 opacity: .8
49 }
50 .blue_off.zout{
51 opacity: .8
52 }
53 .blue_disable {
54 opacity: .33
55 }
56
57 .blue_disable {
58 opacity: .33
59 }
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);
时间： 2024-10-09 22:44:44