手機端擷取使用者詳細地理位置(高德地圖API)

來源:互聯網
上載者:User

標籤:複製   src   one   als   地理   web   直接   位移量   osi   

項目開發需要擷取使用者詳細的地理位置資訊,使用了高德地圖API介面

1,註冊高德地圖開發人員帳號擷取開發人員Key 2,頁面調用

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

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, // 是否使用高精度定位,預設:true19             timeout: 10000,           // 超過10秒後停止定位,預設:無窮大20             maximumAge: 0,            // 定位結果緩衝0毫秒,預設:021             convert: true,            // 自動位移座標,位移後的座標為高德座標,預設:true22             showButton: true,         // 顯示定位按鈕,預設:true23             buttonPosition: ‘LB‘,     // 定位按鈕固定位置,預設:‘LB‘,左下角24             buttonOffset: new AMap.Pixel(10, 20), // 定位按鈕與設定的固定位置的位移量,預設:Pixel(10, 20)25             showMarker: true,         // 定位成功後在定位到的位置顯示點標記,預設:true26             showCircle: true,         // 定位成功後用圓圈表示定位精度範圍,預設:true27             panToLocation: true,      // 定位成功後將定位到的位置作為地圖中心點,預設:true28             zoomToAccuracy:true       // 定位成功後調整地圖視野範圍使定位位置及精度範圍視野內可見,預設:false29         });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檔案中,在手機端查看具體資訊

 

手機端擷取使用者詳細地理位置(高德地圖API)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.