使用getCurrentPosition方法實時獲取當前Geolocation信息(附源碼文件)--html5、JavaScript


使用getCurrentPosition方法實時獲取當前Geolocation信息:

1、getCurrentPosition方法的使用

 1 navigator.geolocation.getCurrentPosition(
 2         function (position) {
 3             //獲取地理位置成功時所做的處理
 4     },
 5         function (error) {
 6             //獲取地理位置信息失敗時所做的處理
 7     }, //以下是可選屬性
 8         {
 9             enableHighAccuracy: true,//是否要求高精度的地理位置信息
10             timeout: 1000,//對地理位置信息的獲取操作做超時限制,如果再該事件內未獲取到地理位置信息,將返回錯誤
11             maximumAge:60*1000//設置緩存有效時間,在該時間段內,獲取的地理位置信息還是設置此時間段之前的那次獲得的信息,超過這段時間緩存的位置信息會被廢棄
12         })

2、使用getCurrentPosition方法和position對象的一些屬性等實現實時獲取地理位置的經緯度

 1 <!Doctype html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <meta charset="utf-8" />
 6     <meta name="keywords" content="關鍵詞"/>
 7     <meta name="description" content="描述"/>
 8     <meta name="author" content="奇客藝術"/>
 9 </head>
10 <body>
11 <p id="GeoDisplay"></p>
12 <script>
13     Geolocation();//執行Geolocation()函數
14     setInterval(Geolocation,100);//設置定時器,100ms執行一次Geolocation();實現實時獲取
15     function getElem(id) {
16         return typeof id === 'string' ? document.getElementById(id):id;//typeof表示變量id的類型為字符串類型
17     }
18     var GetID = getElem("GeoDisplay");
19     function showMap(lat,lon) {//自定義了一個在瀏覽器上顯示地理信息的函數
20     var str = "您當前位置的維度:"+lat+",經度:"+lon;
21         GetID.innerHTML = str;
22     }
23     function Geolocation() {
24         if(navigator.geolocation){
25             navigator.geolocation.getCurrentPosition(
26                 function (position) {//傳入了對象position
27                     showMap(position.coords.latitude,position.coords.longitude);
28                 },
29                 function (err) {//傳入了error對象
30                     GetID.innerHTML = err.code + '\n'+err.message;//Firefox3.6以上不支持error對象的message屬性
31                     //error對象的code屬性有如下屬性值:
32                     //PERMISSION_DENIED(1):(permission_denied):用戶單機信息條上的“不共享”按鈕或直接拒絕被獲取位置信息
33                     //POSITION_UNAVAILABLE(2):(position_unavailable):(position_unavailable)網絡不可用或者無法連接到獲取位置信息的衛星
34                     //TIMEOUT(3):(timeout)網絡可用但在計算機用戶的位置上花費過長時間
35                     //UNKNOWN_ERROR(0):(unknown_error)發生其他未知錯誤
36                 })
37             }else {
38                 GetID.innerHTML = "您當前使用的瀏覽器不支持地理定位服務";
39         }
40     }
41 </script>
42 </body>
43 </html>

Effect  Picture:(當然也會受到網絡的影響,變化沒那么快;Microsoft Edge 38.14393.0.0下測試)

源碼文件下載:getCurrentPosition方法實時獲取當前Geolocation信息.zip

文章系筆者原創,轉載請注明出處,感謝合作!


免責聲明!

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



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