教育行業(yè)A股IPO第一股（股票代碼 003032）

全國咨詢/投訴熱線：400-618-4000

Geolocation API如何獲取用戶當(dāng)前位置

更新時(shí)間:2022年03月31日15時(shí)34分 來源:傳智教育 瀏覽次數(shù):

GeolocationAPI的使用非常簡單，“navigator.geolocation”對象提供了可以公開訪問地理位置的方法，其中navigator為瀏覽器內(nèi)置對象。檢測瀏覽器是否支持定位API，只需要檢測geolocation是否存在于navigator中即可。對于移動(dòng)Web開發(fā)者，大多數(shù)情況只需要獲取用戶的當(dāng)前位置，此時(shí)我們可以使用getCurrentPosition()方法來獲取當(dāng)前位置的坐標(biāo)值。getCurrentPosition()被調(diào)用時(shí)會(huì)發(fā)起一個(gè)異步請求，瀏覽器會(huì)調(diào)用系統(tǒng)底層的硬件(如GPS)來更新當(dāng)前的位置信息，當(dāng)信息獲取到之后會(huì)在回調(diào)函數(shù)中傳入position對象。

position對象包含兩個(gè)屬性，一個(gè)是coords(坐標(biāo))，它是一個(gè)Coordiante對象，包含當(dāng)前位置信息;另一個(gè)是timestamp，表示獲取到位置的時(shí)間戳。

coordiante對象包含包括經(jīng)緯度在內(nèi)的一系列信息具體如下所示。

latitude：一個(gè)十進(jìn)制表示的緯度坐標(biāo)。

longitude：一個(gè)十進(jìn)制表示經(jīng)度的坐標(biāo)。

altitude：海拔高度(以米為單位，如果是5，表示精確到5米范圍)。

accuracy：當(dāng)前經(jīng)緯度信息的精度(以米為單位)。

altitudeAccuracy：當(dāng)前海拔高度的精度。

heading：代表當(dāng)前設(shè)備的朝向，該值是以弧度為單位，指示了按順時(shí)針方向相對

于正北的度數(shù)(例如：heading為270的時(shí)候表示正西方)。接下來，用通過一個(gè)案例來演示如何使GeolocationAPI獲取當(dāng)前位置。代碼如demo3-6所示。

demo3-6.html

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script>
         function getMyPosition(){
           if(window.navigator.geolocation){
               //獲取當(dāng)前位置..
               alert("正在獲取您的位置.");
               //如果獲取位置成功，會(huì)調(diào)用名字為successPosition 的方法.
               navigator.geolocation.getCurrentPosition
               (successPosition,errorPosition);
            }else{
               alert("您當(dāng)前的瀏覽器不支持..");
            }
       }
       function successPosition(position){
          var jd=position.coords.longitude;//經(jīng)度
          var wd=position.coords.latitude;//緯度
          alert(jd+","+wd);
        }
        //如果沒有獲取到位置，就會(huì)調(diào)用這個(gè)方法
        function errorPosition(){
                alert("獲取位置失敗.");
        }
        getMyPosition();
    </script>
</head>
<body>
</body>
</html>

因?yàn)镚eolocation獲取當(dāng)前定位除了瀏覽器的支持，還需要硬件設(shè)備的支持，上述代碼在不支持該操作的設(shè)備上運(yùn)行的結(jié)果如圖3-8和圖3-9。

普通PC提示對話框
圖3-8普通PC提示對話框1
普通PC提示對話框2
圖3-9普通PC提示對話框2

現(xiàn)在我們在Mac電腦上用瀏覽器打開demo3-6，結(jié)果如圖3-10和圖3-11所示。

Mac提示對話框
圖3-10Mac提示對話框1
Mac提示對話框
圖3-11Mac提示對話框2

在移動(dòng)端用瀏覽器打開demo3-6，結(jié)果如圖3-12和圖3-13所示。

Geolocation API移動(dòng)提示對話框
圖3-12移動(dòng)提示對話框1

圖3-13移動(dòng)提示對話框2

以上內(nèi)容演示了Geolocation獲取當(dāng)前位置的過程，值得一提的是，該案例獲取的是當(dāng)前位置的地理坐標(biāo)，所以位置變化會(huì)導(dǎo)致坐標(biāo)變化。

多學(xué)一招：監(jiān)視移動(dòng)設(shè)備的位置變化

接下來要介紹一個(gè)名詞LBS，LBS是基于位置的服務(wù)，它是通過電信移動(dòng)運(yùn)營商的無線電通訊網(wǎng)絡(luò)(如GSM網(wǎng)、CDMA網(wǎng))或外部定位方式(如GPS)獲取移動(dòng)終端用戶的位置信息(地理坐標(biāo)，或大地坐標(biāo))。

在正文中演示的getCurrentPosition()方法只在調(diào)用時(shí)會(huì)得到位置信息，在LBS應(yīng)用中，檢測用戶位置變化是非常常見的需求。一個(gè)做法是通過循環(huán)調(diào)用的方式去檢測位置變化。

例如，設(shè)置了一個(gè)10秒作為獲取位置的間隔，這樣做的缺點(diǎn)是：編程人員無法知道用戶當(dāng)前的速度，如果在飛機(jī)高鐵上，10秒可能已經(jīng)走了很長一段距離，這樣提供給用戶的位置信息可能是延遲的，如果將間隔設(shè)置的很短，又會(huì)非常耗電耗能，如果用戶長時(shí)間沒動(dòng)，那這些查詢都是無用的。

為了解決這個(gè)問題，Geolocation還提供了watchPosition()方法，可以讓系統(tǒng)通知編程人員用戶的位置發(fā)生了變化。

watchPosition()方法和getCurrentPosition方法在調(diào)用上類似，但方法功能與getCurrentPosition的區(qū)別是非常明顯的。調(diào)用該函數(shù)時(shí)會(huì)返回一個(gè)watch ID，這個(gè)ID和setInterval()函數(shù)返回的ID類似，可以用于清除此次的監(jiān)視操作。

watchPosition()方法也接受相同的三個(gè)參數(shù)，success、error回調(diào)以及一個(gè)PositionOptions對象。





猜你喜歡：

HTTP模塊常用的API有幾個(gè)？

matplotlib是什么？matplotib的3中API介紹

Web API和API有什么關(guān)系？

API服務(wù)網(wǎng)關(guān)實(shí)現(xiàn)之APISIX安裝和部署

傳智教育前端與移動(dòng)開發(fā)培訓(xùn)課程

0 分享到：
和我們在線交談！