JavaScript--百度地圖定位,可拖拽
阿新 • • 發佈:2018-09-11
event 控件 int pla location view api 事件 ont
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=c4gzpT5Nq6kzMLxK9xYLduaILi4jlt1Q"></script> <title>JavaScript百度地圖接口定位</title> <style> .BMap_cpyCtrl { display: none; } .anchorBL { display: none; } </style> </head> <body> <div id="allmap"></div> <script type="text/javascript"> //定位成功事件 var myKeys=‘‘; // 當前定位為位置 var myKeys2=‘‘; // 拖動後的位置 var lng=‘‘; // 經度 var lat=‘‘; // 緯度 // 百度地圖API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.331398,39.897445); map.centerAndZoom(point,17); //添加上縮放的平移控件,縮略圖控件以及設置顯示的位置--> map.addControl(new BMap.NavigationControl()); var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ console.log(r.point); if(this.getStatus() == BMAP_STATUS_SUCCESS){ var mk = new BMap.Marker(r.point); map.addOverlay(mk);//標出所在地 map.panTo(r.point);//地圖中心移動 lng=r.point.lng; lat=r.point.lat; var point = new BMap.Point(r.point.lng,r.point.lat); //用所定位的經緯度查找所在地省市街道等信息 var gc = new BMap.Geocoder(); var gc2 = new BMap.Geocoder(); gc.getLocation(point, function(rs){ var addComp = rs.addressComponents; console.log(rs.address);//地址信息 myKeys = rs.address; alert(myKeys); //彈出所在地址 }); var marker = new BMap.Marker(point); //創建標註 map.addOverlay(marker); //將標註添加到地圖中 marker.enableDragging(); //設置標註可拖拽(默認為不可拖拽) marker.addEventListener(‘dragend‘, function(e){ var point2 = new BMap.Point(e.point.lng,e.point.lat); //用所定位的經緯度查找所在地省市街道等信息 // alert(‘當前坐標:‘ + e.point.lng + ", " + e.point.lat); gc.getLocation(point2, function(rs2){ var addComp = rs2.addressComponents; console.log(rs2.address);//地址信息 myKeys2 = rs2.address; alert(myKeys2); //彈出所在地址 }); }); }else { alert(‘failed‘+this.getStatus()); } },{enableHighAccuracy: true}); </script> </body> </html>
JavaScript--百度地圖定位,可拖拽