獲取使用者精準地理位置資訊（百度地圖）

crf-Aaron發表於2018-04-27
地圖

獲取使用者精準地理位置資訊步驟：

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—————————————

相關文章