使用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下測試)

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