Jquery 在地理位置排序中显示以英里为单位的距离

我想通过在下面的代码片段中使用SPAN标记这样做来显示与每个列表项的距离（以英里为单位），但我不确定如何显示。脚本已经很好地排序并计算了距离，我只是不知道如何将其写入页面。我觉得这是相当简单，所以我希望有人能帮助我

        <li>
            <div class="name">
                Moe Bar <span class="miles"></span></div>
            <div class="long">
                47.60357999999998</div>
            <div class="lat">
                -122.329454</div>
        </li>

动杆
47.60357999999998
-122.329454

完整代码 工作示例

本地酒吧
函数findMe（）{
if（navigator.geolocation！=未定义）{
navigator.geolocation.watchPosition（onFound，onError）；
}
}
功能已找到（pos）{
var userLat=位置坐标纬度；
var userLong=pos.coords.longitude；
$（'ul li'）。每个（函数（索引）{
var locationLat=$（this.find（'.lat'）.html（）；
var locationLong=$（this.find（'.long'）.html（）；
var distance=getDistance（userLat、locationLat、userLong、locationLong）；
$（此）.数据（“距离”，距离）；
})
重新排序（）；
}
函数onError（pos）{
警惕（“出了差错”）；
}
函数重新排序（）{
$（'ul li'）.sort（sortAlpha）.appendTo（'ul'）；
}
sortAlpha函数（a，b）{
返回$（a）.data（'distance'）>$（b）.data（'distance'）？1:-1；
};
函数getDistance（lat1、lat2、lon1、lon2）{
var R=6371；//km
var d=Math.acos（Math.sin（lat1）*Math.sin（lat2）+
数学cos（lat1）*数学cos（lat2）*
Math.cos（lon2-lon1））*R；
返回d；
}; 
长的，长的
{
显示：无；
}


动杆
47.60357999999998
-122.329454


边防室
47.61469022047056
-122.34816509008769


看见声音
47.6156159656448
-122.32593494177237

下面是一个实时工作示例：

假设：

在我的代码中，列表更易于编码，解释假设以下代码：

<li data-lat="-122.34928138554072" data-lng="47.61370665587537">
    War Room
</li>

然后，循环遍历所有并使用结果创建该属性，例如：

function addDistances(list, geoData)
{
  $(list).each(function() {
    var lat = $(this).data("lat"),
        lng = $(this).data("lng"),
        d = getDistance(lat, geodata.latitude, lng, geodata.longitude),
        km = (Math.floor(d * 100)/100),
        mi = (Math.floor((d*0.621371) * 100)/100);
    $(this)
      .attr("data-distance", d)
      .append(" <span>(" + km + "Km - " + mi + "Miles)</span>");
  });
}

函数添加距离（列表、地理数据）
{
$（列表）。每个（函数（）{
var lat=$（this）.data（“lat”），
液化天然气=$（本）。数据（“液化天然气”），
d=getDistance（纬度、地理数据纬度、lng、地理数据经度），
km=（数学楼层（d*100）/100），
mi=（数学层（（d*0.621371）*100）/100）；
$（本）
.attr（“数据距离”，d）
.附加（“（“+km+”km-“+mi+”Miles）”）；
});
}

然后，您可以使用现有的内容进行正常排序

我的输出：

---

Balexandre，非常好！谢谢你抽出时间。但它似乎只在Chrome中起作用。。。尝试Firefox和Safari时运气不佳。有什么想法吗？是的，我知道为什么。。。这是一个假设，Chrome做得很好，但是其他人需要被设置来理解他们从Google API收到的数据类型是

json

，所以我们需要使用

$.ajax

而不是短的

$.get

。示例更新。太棒了！你帮了大忙，万分感谢！最后一个问题。如果我不想在页面加载时要求共享您的位置，而只想在您单击“按最近的栏排序”时获取您的位置，我将如何实现这一点，理解我将失去关于“您似乎离……很近”的逻辑，那么您只需在

单击
事件上请求位置。例如，
$（document）.delegate（'a.show-pos'，'click'，function（）{requestPosition（）；}）其中
requestPosition
将是一个简单的
函数requestPosition（）{if（navigator.geolocation）navigator.geolocation.getCurrentPosition（成功，错误）；else-alert（'您的设备不支持geolocation！'）；}
// Haversine formula
// http://www.movable-type.co.uk/scripts/latlong.html
function getDistance(lat1, lat2, lon1, lon2) {
  var R = 6371, // km
      dLat = (lat2-lat1).toRad(),
      dLon = (lon2-lon1).toRad();

  lat1 = parseFloat(lat1).toRad();
  lat2 = parseFloat(lat2).toRad();

  var a = Math.sin(dLat/2) * Math.sin(dLat/2) +      
          Math.sin(dLon/2) * Math.sin(dLon/2) *
          Math.cos(lat1) * Math.cos(lat2),
      c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)),
      d = R * c;
  return d;
}

function addDistances(list, geoData)
{
  $(list).each(function() {
    var lat = $(this).data("lat"),
        lng = $(this).data("lng"),
        d = getDistance(lat, geodata.latitude, lng, geodata.longitude),
        km = (Math.floor(d * 100)/100),
        mi = (Math.floor((d*0.621371) * 100)/100);
    $(this)
      .attr("data-distance", d)
      .append(" <span>(" + km + "Km - " + mi + "Miles)</span>");
  });
}