首頁 > web前端 > H5教程 > 主體

HTML5地理位置定位Geolocation-API及Haversine地理空間距離演算法(圖文)

黄舟
發布: 2017-03-11 16:13:26
原創
3075 人瀏覽過

   HTML5提供了Geolocation-API允許我們取得地理位置座標
不過只有針對特定的需求才會用到
比如說地圖應用

一般還是很少用到的

Geolocation-API

使用的方法也很簡單
API都存在於navigator.geolocation物件的原型上

##核心的方法是getCurrentPostion和watchPosition

getCurrentPosition

navigator.geolocation.getCurrentPosition方法有三個參數

  • success 取得位置資訊成功的回呼函數(必須)

  • error 取得位置資訊失敗的回呼函數

  • options 配置資訊參數物件

  • navigator.geolocation.getCurrentPosition(function(pos){
      console.log(pos);//获取位置信息对象Geoposition});
    登入後複製
這時瀏覽器就會發起詢問

因為畢竟位置資訊也算是隱私資訊<br/>

這裡我們點選允許共享位置信息就可以了

然後Chrome就會向Google位置服務發送本地網絡信息<br/>(由於國內封殺了谷歌,所以我們只有翻牆才能獲取到位置信息〒▽〒)<br/>

#可以在控制台內給我們回傳的位置資訊

  • coord 座標

    <br/>

    • accuracy 定位精準度(單位m)

    • altitude 海拔

    • altitudeAccuracy 海拔精準度(單位m)

    • heading 方向

    • latitude 緯度

    • longitude 經度

    • speed 速度

  • timestamp 時間戳記

  • <br/>
    登入後複製
不過這個座標並不是十分精確(特別是PC端)

它可能源自於IP位址、GPS、Wifi定位等等<br/>

navigator.geolocation.getCurrentPosition(function(pos){
  console.log(pos);
},function(err){
  console.log(err);
});
登入後複製

我們可以設定第二個參數當取得地理位置資訊錯誤時做出一些處理

navigator.geolocation.getCurrentPosition(function(pos){
  console.log(pos);
},function(err){
  console.log(err); //获取错误对象PositionError});
登入後複製

例如我現在拒絕共享位置資訊

  • code = 1 表示用戶拒絕

  • code = 2 表示無法取得

  • code = 3 表示連線逾時


#第三個參數用於設定設定資訊

navigator.geolocation.getCurrentPosition(function(pos){
  console.log(pos);
},function(err){
  console.log(err);
},{
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 3000});
登入後複製

  • enableHighAccuracy 是否需要高精度位置預設false

  • #timeout 設定請求逾時時間(單位ms) 預設infinity不限時

  • #maximumAge  位置資訊過期時間(單位ms) 預設0:無條件取得新的地理位置資訊

    <br/>

    • 在重複取得地理位置watchPosition時,此參數指定多久再取得位置

watchPosition

watchPosition與getCurrentPosition參數都是一樣的

差異在於watchPosition是不停的取得位置資訊<br/>例如我們使用的定位軟體<br/>我們在跑步時位置不斷變更,就需要不斷的重繪定位<br/>這樣每當座標發生變化,就會呼叫success回調函數<br/>

而且watchPosiiton會回傳一個watchID

我們可以透過clearWatch(warchID)取消監聽<br/>類似於取消計時器<br/>

var ID = navigator.geolocation.watchPosition(function(pos){  ...},function(err){  ...},{  ...});
navigator.geolocation.clearWatch(ID);
登入後複製

如果clearWatch不帶參數

則清除所有watchPosition<br/>

Haversine演算法

我們有些時候

可能需要取得兩點的距離<br/>比如說訂餐APP的取得附近商家<br/>這時我們就可以利用Haversine演算法來計算<br/>

function toRadians(degree) {
  return degree * Math.PI / 180;
}function haversine(latitude1, longitude1, latitude2, longitude2) {
  var R = 6371;  var deltaLatitude = toRadians(latitude2-latitude1);  
  var deltaLongitude = toRadians(longitude2-longitude1);
  latitude1 = toRadians(latitude1);
  latitude2 = toRadians(latitude2);  
  var a = Math.sin(deltaLatitude/2) * Math.sin(deltaLatitude/2) +    
  Math.cos(latitude1) * Math.cos(latitude2) *    
  Math.sin(deltaLongitude/2) * Math.sin(deltaLongitude/2);  
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));  
  var d = R * c;  return d;
}
登入後複製
傳入兩點的座標就可以得到地理空間距離

其中
var R = 6371;是地球半徑6371km 當然了也存在一些其他演算法
在時間和精確度上有所不同

#

以上是HTML5地理位置定位Geolocation-API及Haversine地理空間距離演算法(圖文)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板