手機端獲取用戶詳細地理位置（高德地圖API）

時間 2019-12-01

標籤手機獲取用戶詳細地理位置地圖 api 简体版

原文原文鏈接

項目開發須要獲取用戶詳細的地理位置信息，使用了高德地圖API接口javascript

1，註冊高德地圖開發者帳號獲取開發者Key

2，頁面調用

1 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=您申請的key值"></script> css

3，示例代碼

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 6     <title>獲取地理位置</title>
 7     <style type="text/css">#iCenter{width:300px; height: 280px; border:1px #000 solid;margin:20px auto;}</style>
 8     <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=3df877a70685dac5ecb3afa375d4c305"></script>
 9 </head>
10 <body>
11 
12 <div id="iCenter"></div>
13 
14 <script type="text/javascript">
15     var mapObj = new AMap.Map('iCenter');
16     mapObj.plugin('AMap.Geolocation', function () {
17         geolocation = new AMap.Geolocation({
18             enableHighAccuracy: true, // 是否使用高精度定位，默認:true
19             timeout: 10000,           // 超過10秒後中止定位，默認：無窮大
20             maximumAge: 0,            // 定位結果緩存0毫秒，默認：0
21             convert: true,            // 自動偏移座標，偏移後的座標爲高德座標，默認：true
22             showButton: true,         // 顯示定位按鈕，默認：true
23             buttonPosition: 'LB',     // 定位按鈕停靠位置，默認：'LB'，左下角
24             buttonOffset: new AMap.Pixel(10, 20), // 定位按鈕與設置的停靠位置的偏移量，默認：Pixel(10, 20)
25             showMarker: true,         // 定位成功後在定位到的位置顯示點標記，默認：true
26             showCircle: true,         // 定位成功後用圓圈表示定位精度範圍，默認：true
27             panToLocation: true,      // 定位成功後將定位到的位置做爲地圖中心點，默認：true
28             zoomToAccuracy:true       // 定位成功後調整地圖視野範圍使定位位置及精度範圍視野內可見，默認：false
29         });
30         mapObj.addControl(geolocation);
31         geolocation.getCurrentPosition();
32         AMap.event.addListener(geolocation, 'complete', onComplete); // 返回定位信息
33         AMap.event.addListener(geolocation, 'error', onError);       // 返回定位出錯信息
34     });
35 
36     function onComplete(obj){
37         var res = '經緯度：' + obj.position + 
38                 '\n精度範圍：' + obj.accuracy + 
39                 '米\n定位結果的來源：' + obj.location_type + 
40                 '\n狀態信息：' + obj.info + 
41                 '\n地址：' + obj.formattedAddress + 
42                 '\n地址信息：' + JSON.stringify(obj.addressComponent, null, 4);
43         alert(res);
44     }
45 
46     function onError(obj) {
47         alert(obj.info + '--' + obj.message);
48         console.log(obj);
49     }
50 </script>
51 </body>
52 </html>

複製代碼直接保存到html文件中，在手機端查看具體信息html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。