触屏网站如何通过浏览器获取定位，并按照距离远近查询数据

基本思路是这样的：

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}，分别为当前设备的纬度和精度。