圖類、打車、外賣等類型的手機(jī)APP，一進(jìn)入便咨詢是否允許獲取我們的位置，允許之后會(huì)根據(jù)我們所在位置推薦好物，逐漸地 H5 網(wǎng)頁(yè)也開(kāi)始獲取用戶位置。Geolocation是 H5 新增的對(duì)象，用于定位。常見(jiàn)打開(kāi)網(wǎng)頁(yè)有兩種方式：移動(dòng)端和PC端。它們是根據(jù)什么如何定位的呢？

1. IP定位：通過(guò)IP地址定位，由于沒(méi)有硬件支持，主要是服務(wù)器根據(jù) IP庫(kù)判斷所處位置，所以精度差。
2. GPS(全球定位系統(tǒng))：使用GPS定位，定位時(shí)間長(zhǎng)，耗電量大，但是精度高。
3. WIFI定位：wifi 定位數(shù)據(jù)是通過(guò)三角距離計(jì)算得到，三角是指當(dāng)前多個(gè)接入wifi用戶的已知距離，wifi在室內(nèi)也非常準(zhǔn)確。
4. 手機(jī)地理位置：基于手機(jī)的地理定位數(shù)據(jù)是通過(guò)用戶到一些基站的三角距離確定。這種方法可提供相當(dāng)準(zhǔn)確的位置結(jié)果。這種方法通常和基于WIFI基于GPS地位結(jié)合使用。
5. 用戶自定義：用戶可以手動(dòng)輸入的地理位置。

Geolocation 方法

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

getCurrentPosition：獲取一次位置

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

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

• coords.latitude - 緯度
• coords.longitude - 經(jīng)度
• coords.altitude - 海拔
• coords.speed - 速度
• coords.accuracy - 經(jīng)緯度精度
• coords.altitudeAccuracy - 海拔精度
• coords.heading - 方向，從正北開(kāi)始的弧度數(shù)

watchPosition：不斷獲取位置

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

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

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

clearWatch 與 js 中的clearInterval類似，clearInterval用于清除定時(shí)器。使用時(shí)語(yǔ)法如下：

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

Geolocation 應(yīng)用

由于該特性可能侵犯用戶的隱私，使用時(shí)自動(dòng)會(huì)詢問(wèn)用戶是否同意授權(quán)位置，除非用戶同意，否則無(wú)法獲取到用戶位置。

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

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

點(diǎn)擊禁止后，調(diào)試器中打印出報(bào)錯(cuò)信息，報(bào)錯(cuò)信息為：

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

點(diǎn)擊允許之后，發(fā)現(xiàn)并未打印出位置信息，什么原因呢？PC是根據(jù)電腦的IP地址來(lái)解析位置的，此時(shí)直接打開(kāi)文件沒(méi)有域名或ip，所以無(wú)法獲取位置，必須把文件放到服務(wù)內(nèi)，如果你是不會(huì)起服務(wù)可以下載nginx，下載安裝成功之后文件放入html文件夾內(nèi)，啟動(dòng)nginx就可以訪問(wèn)了。

啟動(dòng)本地服務(wù)，再次獲取位置之后，發(fā)現(xiàn)依舊報(bào)錯(cuò)，無(wú)法返回位置，報(bào)錯(cuò)信息為：

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

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

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

把上述案例放到線上，獲取位置只要用戶點(diǎn)擊同意就沒(méi)有問(wèn)題啦！

除此之外，帶有位置的我們經(jīng)常會(huì)用到輸入位置，在地圖中自動(dòng)標(biāo)記一個(gè)點(diǎn)，移動(dòng)標(biāo)記點(diǎn)到更具體的位置，如圖：

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