js 調用百度地圖,並且定位用戶地址,顯示省市區街,經緯度


網上的一些百度地圖例子,基本上沒有連套的 定位 例子。下面我分享一套我自己弄的,廢話不多說,看代碼,里面有注釋!


  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6     <title>Hello, World</title>
  7     <style type="text/css">
  8         html
  9         {
 10             height: 100%;
 11         }
 12         body
 13         {
 14             height: 50%;
 15             margin: 0px;
 16             padding: 0px;
 17         }
 18         #container
 19         {
 20             width:500px;
 21             height: 500px;
 22         }
 23     </style>
 24     <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
 25 </head>
 26 <body onload="enter()">
 27     <div id="container">
 28     </div>
 29     <input id="lng" type="hidden" runat="server" />
 30     <input id="lat" type="hidden" runat="server" />
 31     
 32     <script type="text/javascript">
 33 
 34        
 35         var province=0;
 36         var city=0;
 37         var district=0;
 38         var street=0;
 39 
 40         
 41         
 42         function enter() {
 43             if (navigator.geolocation) {  //調用導航器geolocation函數
 44                 navigator.geolocation.getCurrentPosition(loand); //進入總顯示函數loand,函數名由自己定
 45             } else {
 46                 alert("您的瀏覽器不支持地理定位");//不支持
 47             }
 48         }
 49         function loand(position) {  //主函數
 50             var lat = position.coords.latitude;//y,緯度,通過上面的getCurrentPosition函數定位瀏覽器位置,從而獲取地址
 51             var lon = position.coords.longitude;//x,經度
 52             //alert(lat);
 53             var map = new BMap.Map("container"); //初始化地圖類
 54             var point = new BMap.Point(lon,lat); //這里設置剛開始的點所在處
 55             var gc = new BMap.Geocoder();  //初始化,Geocoder類
 56             gc.getLocation(point, function (rs) {   //getLocation函數用來解析地址信息,分別返回省市區街等
 57                 var addComp = rs.addressComponents;
 58                 province = addComp.province;//獲取省份
 59                 city = addComp.city;//獲取城市
 60                 district = addComp.district;//
 61                 street = addComp.street;//
 62 
 63 
 64                 var marker = new BMap.Marker(point); //地圖事件類
 65                 var opts = {
 66                     width: 25,     // 信息窗口寬度  
 67                     height: 120,     // 信息窗口高度  
 68                     title: "我所在的地點:<hr />"  // 信息窗口標題 ,這里聲明下,可以在自己輸出的信息里面嵌入html標簽的
 69                 }
 70                 var infoWindow = new BMap.InfoWindow("省份:" + province + ";" + "城市:"
 71                     + city + ";<br /><br />" + "縣/區:" + district + ";" + "街道:" + street + ".", opts);
 72                 // 創建信息窗口對象,把信息在初始化 地圖信息窗口類的同時寫進去
 73                 
 74 
 75                 marker.enableDragging(); //啟用拖拽事件
 76                 marker.addEventListener("dragend", function (e) {
 77                     gc.getLocation(point, function (rs) {
 78                         //由於在getLocation函數返回信息之前,首先執行它下面的代碼的,所以要把重新拖動后的代碼放到它里面
 79                         var addComp = rs.addressComponents;
 80                         province = addComp.province;//獲取省份
 81                         city = addComp.city;//獲取城市
 82                         district = addComp.district;//
 83                         street = addComp.street;//
 84                         opts = {
 85                             width: 25,     // 信息窗口寬度  
 86                             height: 160,     // 信息窗口高度  
 87                             title: "現在的位置:<hr />"  // 信息窗口標題  
 88                         }
 89                         point = new BMap.Point(e.point.lng, e.point.lat); //標記新坐標(拖拽以后的坐標)
 90                         marker = new BMap.Marker(point);  //事件類
 91 
 92 
 93                         infoWindow = new BMap.InfoWindow("省份:" + province + ";" + "城市:"
 94                         + city + ";<br /><br />" + "縣/區:" + district + ";" + "街道:" + street + ".<br />" +
 95                             "經度:" + e.point.lng + "<br />緯度:" + e.point.lat, opts);
 96 
 97                         map.openInfoWindow(infoWindow, point);
 98                         //這條函數openInfoWindow是輸出信息函數,傳入信息類和點坐標
 99                     })
100                 })
101 
102                 map.addControl(new BMap.NavigationControl()); //左上角控件
103                 map.enableScrollWheelZoom(); //滾動放大
104                 map.enableKeyboard(); //鍵盤放大
105 
106                 map.centerAndZoom(point, 13); //繪制地圖
107                 map.addOverlay(marker); //標記地圖
108 
109                 map.openInfoWindow(infoWindow, map.getCenter());      // 打開信息窗口
110             });
111          }
112 
113     </script>
114   </body>
115 </html> 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM