百度地图小Demo---获取当前地址以及拖拽显示地址

1、效果图

　　

 

 

2、源码

主要使用百度地图的JavaScript API文件，以及一个JQuery文件。

  1 <!doctype html>
  2 <html lang="en">
  3  <head>
  4   <meta charset="UTF-8">
  5   <meta name="Generator" content="EditPlus®">
  6   <meta name="Author" content="">
  7   <meta name="Keywords" content="">
  8   <meta name="Description" content="">
  9   <title>地图Demo2</title>
 10 
 11     <style type="text/css">
 12         html{height:100%}    
 13         body{height:100%;margin:0px;padding:0px}    
 14         #map_canvas{
 15             margin:0 auto;
 16             border:2px solid #f9f7f6;
 17             width:80%;
 18             height:80%;
 19             }    
 20 
 21         
 22     </style>
 23   
 24  </head>
 25  <body>
 26     
 27 
 28     <div id="map_canvas"></div>
 29 
 30     <script src="jquery-2.1.4.min.js"></script>
 31     <script src="http://api.map.baidu.com/api?v=2.0&ak=74af171e2b27ee021ed33e549a9d3fb9"></script>
 32     <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
 33     <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
 34 
 35     <script type="text/javascript">
 36         var map = new BMap.Map("map_canvas");          // 创建地图实例
 37         var initLat = 39.916527;
 38         var initLng = 116.397128;
 39         var point = new BMap.Point(initLng, initLat);  // 创建点坐标  
 40         map.centerAndZoom(point, 13);                 // 初始化地图，设置中心点坐标和地图级别  
 41 
 42 
 43    
 44         //var marker = new BMap.Marker(point);        // 创建标注    
 45         //map.addOverlay(marker);                     // 将标注添加到地图中
 46 
 47         map.enableScrollWheelZoom();                            // 启用滚轮放大缩小 
 48         map.addControl(new BMap.NavigationControl());           // 启用放大缩小 尺
 49         
 50         //获取当前位置
 51         var geolocation = new BMap.Geolocation();  
 52         geolocation.getCurrentPosition(function(r){  
 53             if(this.getStatus() == BMAP_STATUS_SUCCESS){  
 54                 mk = new BMap.Marker(r.point);  
 55                 mk.addEventListener("dragend", showInfo);
 56                 mk.enableDragging();    //可拖拽
 57                 
 58                 getAddress(r.point);
 59 
 60                 map.addOverlay(mk);//把点添加到地图上  
 61                 map.panTo(r.point); 
 62 
 63             }else {  
 64                 alert('failed'+this.getStatus());  
 65             }  
 66         });
 67         
 68         //绑定Marker的拖拽事件
 69         function showInfo(e){
 70             var gc = new BMap.Geocoder();
 71             gc.getLocation(e.point, function(rs){
 72                 var addComp = rs.addressComponents;
 73                 var address = addComp.province +  addComp.city + addComp.district + addComp.street + addComp.streetNumber;//获取地址
 74                 
 75                 //画图 ---》显示地址信息
 76                 var label = new BMap.Label(address,{offset:new BMap.Size(20,-10)});
 77                 map.removeOverlay(mk.getLabel());//删除之前的label 
 78 
 79                 mk.setLabel(label);
 80                 //alert(e.point.lng + ", " + e.point.lat + ", "+address);
 81              });
 82         }
 83         
 84         //获取地址信息，设置地址label
 85         function getAddress(point){
 86             var gc = new BMap.Geocoder();
 87             
 88             gc.getLocation(point, function(rs){
 89                 var addComp = rs.addressComponents;
 90                 var address =  addComp.province +  addComp.city + addComp.district + addComp.street + addComp.streetNumber;//获取地址
 91                 
 92                 //画图 ---》显示地址信息
 93                 var label = new BMap.Label(address,{offset:new BMap.Size(20,-10)});
 94                 map.removeOverlay(mk.getLabel());//删除之前的label 
 95 
 96                 mk.setLabel(label);
 97                 
 98              });
 99              
100         }
101         
102         
103         
104     </script>
105 
106  </body>
107 </html>
108 
109

 

posted @ 2017-03-20 11:26  蜗牛噢  阅读(9061)  评论(0)  编辑  收藏  举报