基於瀏覽器的HTML5地理定位

時間 2019-12-09

原文原文鏈接

地理位置（Geolocation）是 HTML5 的重要特性之一，提供了肯定用戶位置的功能，藉助這個特性可以開發基於位置信息的應用。今天這篇文章向你們介紹一下 HTML5 地理位置定位的基本原理和一個基於瀏覽器的HTML5地理定位的小demo，獲取瀏覽器經緯度，並用騰訊地圖（你們能夠選擇本身喜歡的地圖）顯示出來，實現的最終效果以下圖所示：javascript

一、檢測瀏覽器是否支持：css

if (navigator.geolocation) {html

//console.log("瀏覽器支持!");html5

}java

else {git

// console.log("瀏覽器不支持!");算法

}chrome

二、navigator.geolocation用於獲取基於瀏覽器的當前用戶地理位置，提供了3個方法:api

void getCurrentPosition(onSuccess,onError,options);瀏覽器

//獲取用戶當前位置

int watchCurrentPosition(onSuccess,onError,options);

//持續獲取當前用戶位置

void clearWatch(watchId);

//watchId 爲watchCurrentPosition返回的值

//取消監控

參數詳細說明見下表：

參數	功能	返回參數	是否必選
onSuccess	方法成功時候的回調，返回position對象，經過這個對象能夠獲取地理位置的相關信息	Coords 返回當前位置的座標 Coordinates	必須
		Timestamp 返回獲取座標信息的時間字符串
onError	方法失敗時候的回調，返回error對象，經過這個對象返回錯誤類型	Code 返回表明錯誤類型的代碼有以下數值： 1用戶未受權使用地理定位功能 2不能肯定位置 3請求位置的嘗試已超時	可選
		message 返回描述錯誤的字符串字符串
options	額外參數	enableHighAccuracy 告訴瀏覽器咱們但願獲得可能的高精度的地理信息布爾值	可選
		timeout 限制請求位置的時間,設置多少毫秒後會報告一個超時錯誤數值
		maximumAge 告訴瀏覽器咱們願意接受緩存過的位置,只要它不早於指定的毫秒數數值

3、代碼實現

1、實現原理：html5地理定位 + 騰訊地圖

2、實現思路：

① 判斷瀏覽器是否支持geolocation地理定位

② 用HTML5 Geolocation API (地理位置應用程序接口)獲取經緯度

③ 調用騰訊地圖接口，將獲取到的經緯度以參數形式參入騰訊地圖地理座標中，並顯示到頁面上

PS：也能夠調用百度地圖、谷歌地圖、高德地圖等，只須要將HTML5 Geolocation API獲取到的值傳入到相應的地圖接口中

3、代碼實現：

①調用騰訊地圖JavaScript API，URL路徑爲：http://map.qq.com/api/js?v=2.exp

②核心代碼：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
 7 <meta name="format-detection"content="telephone=no">
 8 <title>基於瀏覽器的HTML5地理定位</title>
 9 <link rel="stylesheet" href="style/style.css">
10 </head>
11 <body>
12     <div id="container"></div>
13     <div id="info"></div>
14     <script src="http://map.qq.com/api/js?v=2.exp" type="text/javascript"></script> 
15     <script>
16           var clientWidth = document.documentElement.clientWidth, 17  clientHeight = document.documentElement.clientHeight; 18           var container = document.getElementById('container'); 19  container.style.width = clientWidth + 'px'; 20  container.style.height = clientHeight + 'px'; 21 
22           function getLocation(){ 23 
24              var options={ 25  enableHighAccuracy:true, //boolean 是否要求高精度的地理信息，默認爲false
26  maximumAge:1000 //應用程序的緩存時間
27  } 28 
29              if(navigator.geolocation){ 30                  //瀏覽器支持geolocation
31  navigator.geolocation.getCurrentPosition(onSuccess,onError,options); 32                  
33  }else{ 34                  //瀏覽器不支持geolocation
35  console.log("瀏覽器不支持!"); 36  } 37  } 38 
39           //成功時
40           function onSuccess(position){ 41               //返回用戶位置
42               //經度
43               var longitude =position.coords.longitude; 44               //緯度
45               var latitude = position.coords.latitude; 46 
47               //騰訊地圖的中心地理座標
48               var center = new qq.maps.LatLng(latitude, longitude); 49 
50               //使用騰訊地圖API
51               var map = new qq.maps.Map(document.getElementById("container"), { 52                 //地圖的中心地理座標
53  center: center, 54                 //初始化地圖縮放級別
55  zoom: 16
56  }); 57 
58               //在地圖中建立信息提示窗口
59               var infoWin = new qq.maps.InfoWindow({ 60  map: map 61  }); 62               //打開信息窗口
63  infoWin.open(); 64               //設置信息窗口顯示區的內容
65  infoWin.setContent('<div style="width:200px;padding:10px;">'+
66                   '您在這裏<br/>緯度：'+ latitude+  '<br/>經度：'+longitude); 67               //設置信息窗口的位置
68  infoWin.setPosition(center); 69  } 70 
71 
72           //失敗時
73           function onError(error){ 74              switch(error.code){ 75                  case error.PERMISSION_DENIED: 76  alert("用戶拒絕對獲取地理位置的請求"); 77                  break; 78 
79                  case error.POSITION_UNAVAILABLE: 80  alert("位置信息是不可用的"); 81                  break; 82 
83                  case error.TIMEOUT: 84  alert("請求用戶地理位置超時"); 85                  break; 86 
87                  case error.UNKNOWN_ERROR: 88  alert("未知錯誤"); 89                  break; 90  } 91 
92  } 93 
94  window.onload=getLocation; 95    </script>
96 </body>
97 </html>

DEMO演示

四、注意事項：

此代碼在PC端運行，會得不到數據，由於獲取位置信息，以及監控位置的變化這些操做都屬於敏感性操做，因此browsers在執行都會很是謹慎。它須要你在安全的環境而且獲取用戶的贊成纔會執行。

在移動端，會提示是否容許地理位置受權，用戶贊成後，纔會繼續獲取數據，進行下面的操做。

還有一點須要注意：

用HTML5 Geolocation API (地理位置應用程序接口)得到的經緯度參數，傳入到騰訊地圖，並顯示出來後，會發現會有必定的偏移，這是由於我國把美國衛星的GPS的地球座標，進行偏移的算法，計算後，得出了一個火星座標。爲了讓火星座標能正確的顯示，又給每部導航軟件加入了這個算法，能夠在你們的地圖上還原位置；而本身寫的程序裏沒有加入此算法，因此出現了偏移問題，而這個加偏並非線性的加偏，因此各地的偏移狀況都會有所不一樣。