百度地图自定义控件分享

墨裔

1. <script>
   
2.         var map = new BMap.Map('allmap');
   
3.         var Bcenter = new BMap.Point(116.404,39.915);
   
4.         map.centerAndZoom(Bcenter,11);
   
5.         //自定义控件
   
6.         function staticControl(){
   
7.             this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
   
8.             this.defaultOffset = new BMap.Size(10,10);
   
9.         }
   
10.         //继承Control的API
    
11.         staticControl.prototype = new BMap.Control();
    
12.         //初始化控件
    
13.         staticControl.prototype.initialize=function(map){
    
14.             var div = document.createElement('div');
    
15.             var e1 = document.createElement('input');
    
16.             e1.type = 'button';
    
17.             e1.value = '重置';
    
18.             e1.onclick=function(){
    
19.                 statics();
    
20.             }
    
21.             div.appendChild(e1);
    
22.             var e2=document.createElement('input');
    
23.             e2.type = 'button';
    
24.             e2.value = '缩小';
    
25.             e2.onclick=function(){
    
26.                 endStatics();
    
27.             }
    
28.             div.appendChild(e2);
    
29.             var e3 = document.createElement("input");
    
30.             e3.type = "button";
    
31.             e3.value = "放大";
    
32.             e3.onclick = function () {
    
33.                setStatics();
    
34.             }
    
35.             div.appendChild(e3);
    
36.             //添加DOM元素到地图中
    
37.             map.getContainer().appendChild(div);
    
38.             //返回DOM
    
39.             return div;
    
40.         }
    
41.         //创建控件实例
    
42.         var staticsCtrl = new staticControl();
    
43.         //添加到地图当中
    
44.         map.addControl(staticsCtrl);
    
45.         function statics(){
    
46.             map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    
47.         }
    
48.         function endStatics(){
    
49.             map.setZoom(map.getZoom()-2);
    
50.         }
    
51.         function setStatics(){
    
52.             map.setZoom(map.getZoom()+2)
    
53.         }
    
54.     </script>

复制代码