H5 網站如何通過瀏覽器獲取定位，並按照距離遠近查詢資料

熊能發表於2019-06-17
H5網站瀏覽器
  1. 判斷瀏覽器是否支援獲取位置
  2. 嘗試獲取使用者地理位置
  3. 成功則按照距離遠近載入列表
  4. 否則按照普通模式載入列表

JavaScript程式碼：

function loadData(){
  if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(loadByPosition,showErro  r);
  }else{
    alert('瀏覽器不支援定位');
  }
}

上述方法中的兩個引數loadByPosition和showError分別是獲取定位成功和失敗的回撥方法。
下面是成功之後按照位置獲取列表的方法：

function loadByPosition(position){
var lon = position.coords.longitude; //經度 102
var lat = position.coords.latitude; //緯度 25
$.ajax({
  url:'',
  type:'post',
  data:{'position':{'lon':lon,'lat':lat}},
  success:function (data){
    $('list').append(data);
  }
})
}

如果不成功，載入普通列表並提示錯誤的方法如下：

function showError(error){
loadCommon();
switch(error.code) {
  case error.PERMISSION_DENIED:
    alert("定位失敗,使用者拒絕請求地理定位");
  break;
  case error.POSITION_UNAVAILABLE:
    alert("定位失敗,位置資訊是不可用");
  break;
  case error.TIMEOUT:
    alert("定位失敗,請求獲取使用者位置超時");
  break;
  case error.UNKNOWN_ERROR:
    alert("定位失敗,定位系統失效");
  break;
}
}

在SQL語句中，加入下面的查詢欄位，即可以通過座標計算距離並排序：

ROUND(6378.138*2*ASIN(SQRT(POW(SIN(({$lat}*PI()/180-latitude*PI()/180)/2),2)+COS({$lat}*PI()/180)*COS(latitude*PI()/180)*POW(SIN(({$lng}*PI()/180-longitude*PI()/180)/2),2)))*1000) AS distance
...
order by distance

需要替換SQL語句中的{$lat}和{$lng}，分別為當前裝置的緯度和精度。

相關文章