百度地图Api进阶教程-点击生成和拖动标注4.html

来源:互联网 发布:淘宝买家退款率怎么查 编辑:程序博客网 时间:2024/05/29 00:29

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

[html] view plaincopy
  1. <!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.     var iscreatr=false;  
  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.         map.addEventListener("click", function(e){  
  18.             if(iscreatr==true)return;  
  19.             //---------------------------------------------遮盖物---------------------------------------------  
  20.             iscreatr=true;  
  21.              var point = new BMap.Point(e.point.lng ,e.point.lat);//默认  
  22.              // 创建标注对象并添加到地图    
  23.              var marker = new BMap.Marker(point);    
  24.              var label = new BMap.Label("我是可以拖动的",{offset:new BMap.Size(20,-10)});  
  25.              marker.setLabel(label)  
  26.              map.addOverlay(marker);    
  27.              marker.enableDragging();    //可拖拽  
  28.              marker.addEventListener("dragend", function(e){   
  29.                     document.getElementById("r-result").innerHTML = e.point.lng + ", " + e.point.lat;//打印拖动结束坐标  
  30.              });  
  31.         });  
  32.   
  33.     }  
  34.    
  35.     function loadScript() {  
  36.        var script = document.createElement("script");  
  37.        script.src = "http://api.map.baidu.com/api?v=1.4&callback=initialize";  
  38.        document.body.appendChild(script);  
  39.     }  
  40.    
  41.     window.onload = loadScript;  
  42. </script>  
  43.   
  44.   
  45. </head>  
  46.  <body>  
  47.     <div id="r-result" style="float:left;width:100px;">打印坐标</div>  
  48.     <div id="allmap" style="width: 800px; height: 500px"></div>  
  49. </body>  
  50. </html>  
  51.   
  52. <script type="text/javascript">  
  53.     // 移动到某点 map.panTo(new BMap.Point(116.409, 39.918));    
  54.      // map.setZoom(14);   //放到到14级  
  55. </script>  

原创粉丝点击