HTML5(二)——獲取用戶位置Geolocation

地圖類、打車、外賣等類型的手機APP，一進入便咨詢是否允許獲取我們的位置，允許之后會根據我們所在位置推薦好物，逐漸地 H5 網頁也開始獲取用戶位置。Geolocation是 H5 新增的對象，用於定位。常見打開網頁有兩種方式：移動端和PC端。它們是根據什么如何定位的呢？

1. IP定位：通過IP地址定位，由於沒有硬件支持，主要是服務器根據 IP庫判斷所處位置，所以精度差。
2. GPS(全球定位系統)：使用GPS定位，定位時間長，耗電量大，但是精度高。
3. WIFI定位：wifi 定位數據是通過三角距離計算得到，三角是指當前多個接入wifi用戶的已知距離，wifi在室內也非常准確。
4. 手機地理位置：基於手機的地理定位數據是通過用戶到一些基站的三角距離確定。這種方法可提供相當准確的位置結果。這種方法通常和基於WIFI基於GPS地位結合使用。
5. 用戶自定義：用戶可以手動輸入的地理位置。

Geolocation 方法

geolocation對象繼承在navigator對象內，它有兩種方法可以獲取用戶位置getCurrentPosition()和watchPosition()，還有clearWatch取消watchPosition。

getCurrentPosition：獲取一次位置

navigator.geolocation.getCurrentPosition(success=>{
 console.log(success.coords)//包含位置的經緯度、速度、海拔、經緯度精度、海拔精度信息
},fail=>{
 console.log(fail)//獲取失敗的原因
},{
 //可增加的4個配置參數
  enableHighAccuracy:true,//高精度
  timeout:5000,//超時時間,以ms為單位
  maximumAge:24*60*60*1000,//位置緩存時間,以ms為單位
})

位置獲取成功后返回的 success.coords 的屬性

• coords.latitude - 緯度
• coords.longitude - 經度
• coords.altitude - 海拔
• coords.speed - 速度
• coords.accuracy - 經緯度精度
• coords.altitudeAccuracy - 海拔精度
• coords.heading - 方向，從正北開始的弧度數

watchPosition：不斷獲取位置

navigator.geolocation.watchPosition(
 success=>{
  console.log(success.coords)//包含用戶位置速度海拔等信息
 },
 fail=>{
  console.log(fail)//定位失敗原因
 },
 {
  enableHighAccuracy:true,//高精度
  timeout:60*1000,//超時，以ms為單位
  maximumAge:24*60*60*1000,//位置緩存時間，以ms為單位
  frequency:1000,//獲取頻率
 }
)

位置獲取成功后返回的 success.coords 的屬性與上述getCurrentPosition的一致。它兩唯一的區別就是一個獲取一次，另外一個獲取多次，多了一個獲取頻率參數。

clearWatch()： 取消當前位置的獲取，停止 watchPosition 方法。

clearWatch 與 js 中的clearInterval類似，clearInterval用於清除定時器。使用時語法如下：

var wPId = navigator.geolocation.watchPosition(
 success=>{
  console.log(success.coords)//包含用戶位置速度海拔等信息
 },
 fail=>{
  console.log(fail)//定位失敗原因
 },
 {
  enableHighAccuracy:true,//高精度
  timeout:60*1000,//超時，以ms為單位
  maximumAge:24*60*60*1000,//位置緩存時間，以ms為單位
  frequency:1000,//獲取頻率
 }
)
navigator.geolocation.clearWatch(wPId)

Geolocation 應用

由於該特性可能侵犯用戶的隱私，使用時自動會詢問用戶是否同意授權位置，除非用戶同意，否則無法獲取到用戶位置。

function getPosition(){
 if(navigator.geolocation){
  navigator.geolocation.getCurrentPosition(function(res){
   console.log("res",res)//位置信息
  },function(err){
   console.log("err",err)
  })
 }
}
getPosition()

在電腦上，直接使用瀏覽器打開文件，瀏覽器立馬彈出如下顯示框：

 

點擊禁止后，調試器中打印出報錯信息，報錯信息為：

{
　　code: 1
　　message: "User denied Geolocation" //用戶拒絕地理位置
}

 

點擊允許之后，發現並未打印出位置信息，什么原因呢？PC是根據電腦的IP地址來解析位置的，此時直接打開文件沒有域名或ip，所以無法獲取位置，必須把文件放到服務內，如果你是不會起服務可以下載nginx，下載安裝成功之后文件放入html文件夾內，啟動nginx就可以訪問了。

啟動本地服務，再次獲取位置之后，發現依舊報錯，無法返回位置，報錯信息為：

{
 code: 1, 
 message: "Only secure origins are allowed (see: https://goo.gl/Y0ZkNV)."//只允許安全來源
}

意思就是只能在https域名下才可以哦！

還需要注意的是chrome的google瀏覽器也不能獲取位置，但是IE瀏覽器可以獲取到。

把上述案例放到線上，獲取位置只要用戶點擊同意就沒有問題啦！

除此之外，帶有位置的我們經常會用到輸入位置，在地圖中自動標記一個點，移動標記點到更具體的位置，如圖：

 

一般需要繪制地圖的時候，我們就借助三方的百度、高德、騰訊等地圖，注冊賬號，申請密鑰才可以使用。有空了可以去多看看，多了解了解！