獲取用戶精准地理位置信息(百度地圖)


獲取用戶精准地理位置信息步驟:

1.通過 navigator.geolocation.getCurrentPosition(showPosition, showError); 方法獲取經緯度;

2.使用百度地圖坐標轉換接口(http://api.map.baidu.com/geoconv/v1/?coords=114.21892734521,29.575429778924&from=1&to=5&ak=你的密鑰)轉換經緯度;百度地圖官方文檔:http://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition 

3.使用百度地圖逆地理編碼服務接口(http://api.map.baidu.com/geocoder/v2/?callback=renderReverse&location=35.658651,139.745415&output=json&pois=1&ak=您的ak)將坐標點(經緯度)轉換為對應位置信息(如所在行政區划,周邊地標點分布);百度地圖官方文檔:http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-geocoding-abroad

* 注意兩個接口填寫的經緯度的順序不一樣:

  坐標轉換接口:經度在前,緯度在后(經度,緯度);逆地理編碼:緯度在前,經度在后(緯度,經度)

 

示例代碼:注意引入jQuery文件

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 6     <title>HTML5獲取地理位置定位信息</title>
 7     <meta name="keywords" content="html5,地理位置"/>
 8 </head>
 9 <body>
10 
11 <div class="demo">
12     <p>地理坐標:<br/><span id="latlon"></span></p>
13     <div class="geo">
14         <p>百度地圖定位位置:</p>
15         <p id="baidu_geo"></p>
16     </div>
17 </div>
18 
19 <script type="text/javascript" src="js/jquery.min.js"></script>
20 <script>
21     function getLocation() {
22         if (navigator.geolocation) {
23             navigator.geolocation.getCurrentPosition(showPosition, showError);
24         } else {
25             alert("瀏覽器不支持地理定位...");
26         }
27     }
28 
29     function showPosition(position) {
30         $("#latlon").html("緯度:" + position.coords.latitude + ',經度:' + position.coords.longitude);
31         // 坐標轉換:經度在前,緯度在后(經度,緯度)
32         // 逆地理編碼:緯度在前,經度在后(緯度,經度)
33         var latlon = position.coords.longitude + ',' + position.coords.latitude;
34         var changeLatlon = '';
35         // 百度地圖坐標轉換
36         var changeUrl = 'http://api.map.baidu.com/geoconv/v1/?coords=' + latlon + '&from=1&to=5&ak=lRRyy6qoBwnAgj3w4ugGFqoSsWC8du3v';
37         $.ajax({
38             type: "GET",
39             dataType: "jsonp",
40             url: changeUrl,
41             success: function (json) {
42                 if (json.status == 0) {
43                     $.each(json.result,function (i,v) {
44                         // 逆地理編碼:緯度在前,經度在后
45                         changeLatlon = v.y + ',' + v.x;
46                     });
47                     //百度地圖逆地理編碼
48                     var url = "http://api.map.baidu.com/geocoder/v2/?ak=lRRyy6qoBwnAgj3w4ugGFqoSsWC8du3v&callback=renderReverse&location=" + changeLatlon + "&output=json&pois=0";
49                     $.ajax({
50                         type: "GET",
51                         dataType: "jsonp",
52                         url: url,
53                         beforeSend: function () {
54                             $("#baidu_geo").html('正在定位...');
55                         },
56                         success: function (json) {
57                             if (json.status == 0) {
58                                 $("#baidu_geo").html(json.result.formatted_address);
59                             }
60                         },
61                         error: function (XMLHttpRequest, textStatus, errorThrown) {
62                             $("#baidu_geo").html(changeLatlon + "的地址位置獲取失敗");
63                         }
64                     });
65                 }
66             },
67             error: function (XMLHttpRequest, textStatus, errorThrown) {
68                 alert("坐標轉換失敗");
69             }
70         });
71     }
72 
73     // 定位失敗 傳 默認地址
74     function showError(error) {
75         switch (error.code) {
76             case error.PERMISSION_DENIED:
77                 alert("定位失敗,用戶拒絕請求地理定位");
78                 break;
79             case error.POSITION_UNAVAILABLE:
80                 alert("定位失敗,位置信息不可用");
81                 break;
82             case error.TIMEOUT:
83                 alert("定位失敗,請求獲取用戶位置超時");
84                 break;
85             case error.UNKNOWN_ERROR:
86                 alert("定位失敗,定位系統失效");
87                 break;
88         }
89     }
90 
91     getLocation();
92 
93 </script>
94 </body>
95 </html>

 

-----------------------------------------END---------------------------------------


免責聲明!

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



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