百度地图Api进阶教程-默认控件和自定义控件2.html

转载:http://blog.csdn.net/sd0902/article/details/8471321

[html]  view plain copy
  1. <pre name="code" class="html"><!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>百度地图</title>  
  6.   
  7.   
  8. <script type="text/javascript">  
  9.   
  10.     function initialize() {  
  11.         //---------------------------------------------基础示例---------------------------------------------  
  12.         var map = new BMap.Map("allmap",{minZoom:12,maxZoom:20});            // 创建Map实例  
  13.         //map.centerAndZoom(new BMap.Point(116.4035,39.915),15);  //初始化时,即可设置中心点和地图缩放级别。  
  14.         map.centerAndZoom("成都",13);                     // 初始化地图,设置中心点坐标和地图级别。  
  15.         map.enableScrollWheelZoom(true);//鼠标滑动轮子可以滚动  
  16.       
  17.         //---------------------------------------------默认控件示例---------------------------------------------  
  18.         map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件  
  19.           
  20.         //---------------------------------------------版权控件---------------------------------------------  
  21.         var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT});  
  22.   
  23.         //var bs = map.getBounds();  
  24.         cr.addCopyright({id: 1, content: "<a href='#' style='font-size:20px;background:yellow'>我是自定义版权控件呀</a>"});  
  25.         map.addControl(cr); //添加版权控件  
  26.   
  27.         //---------------------------------------------自定义控件---------------------------------------------  
  28.         // 定义一个控件类,即function  
  29.         function ZoomControl(){  
  30.              // 默认停靠位置和偏移量  
  31.             this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;  
  32.             this.defaultOffset = new BMap.Size(10, 10);  
  33.         }  
  34.   
  35.         // 通过JavaScript的prototype属性继承于BMap.Control  
  36.         ZoomControl.prototype = new BMap.Control();  
  37.   
  38.         // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回  
  39.         // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中  
  40.         ZoomControl.prototype.initialize = function(map){  
  41.             // 创建一个DOM元素  
  42.             var div = document.createElement("div");  
  43.             // 添加文字说明  
  44.             //div.appendChild(document.createTextNode("放大2级"));  
  45.              div.innerHTML="<img src=\"http://t2.baidu.com/it/u=351117335,2626617599&fm=0&gp=0.jpg\" />"  
  46.             // 设置样式  
  47.             div.style.cursor = "pointer";  
  48.             div.style.border = "1px solid gray";  
  49.             div.style.backgroundColor = "white";  
  50.             // 绑定事件  
  51.             div.onclick = function(e){  
  52.                 //点击一次放大两级  
  53.                 map.setZoom(map.getZoom() + 2);  
  54.                 alert(1);  
  55.             }  
  56.             // 添加DOM元素到地图中  
  57.             map.getContainer().appendChild(div);  
  58.             // 将DOM元素返回  
  59.             return div;  
  60.         }  
  61.         // 创建控件  
  62.         var myZoomCtrl = new ZoomControl();  
  63.         // 添加到地图当中  
  64.         map.addControl(myZoomCtrl);  
  65.     }  
  66.    
  67.     function loadScript() {  
  68.        var script = document.createElement("script");  
  69.        script.src = "http://api.map.baidu.com/api?v=1.4&callback=initialize";  
  70.        document.body.appendChild(script);  
  71.     }  
  72.    
  73.     window.onload = loadScript;  
  74. </script>  
  75.   
  76.   
  77. </head>  
  78.  <body>  
  79.     <div style="float:left;width:100px;">1</div>  
  80.     <div id="allmap" style="width: 800px; height: 500px"></div>  
  81. </body>  
  82. </html>  
  83.   
  84. <script type="text/javascript">  
  85.     // 移动到某点 map.panTo(new BMap.Point(116.409, 39.918));    
  86.      // map.setZoom(14);   //放到到14级  
  87. </script></pre><br>  
  88. <pre></pre>  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值