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

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

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

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

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

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

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

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

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

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

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

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

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

于正北的度數(shù)(例如：heading為270的時候表示正西方)。接下來，用通過一個案例來演示如何使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("正在獲取您的位置.");
               //如果獲取位置成功，會調(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);
        }
        //如果沒有獲取到位置，就會調(diào)用這個方法
        function errorPosition(){
                alert("獲取位置失敗.");
        }
        getMyPosition();
    </script>
</head>
<body>
</body>
</html>

因為Geolocation獲取當(dāng)前定位除了瀏覽器的支持，還需要硬件設(shè)備的支持，上述代碼在不支持該操作的設(shè)備上運行的結(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

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

Geolocation API移動提示對話框
圖3-12移動提示對話框1

圖3-13移動提示對話框2

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

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

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

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

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

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

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

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





猜你喜歡：

HTTP模塊常用的API有幾個？

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

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

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

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

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