觸屏網站如何通過浏覽器擷取定位，并按照距離遠近查詢資料

基本思路是這樣的：

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 juli
           

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