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