Question

我希望通过以下代码段中的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>

完整代码 http://demos.thebeebs.co.uk/bars-in-seattle/

上的工作示例

<!DOCTYPE html>
<html>
<head>
    <title>Local Bars</title>
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.5.min.js"></script>
    <script>
        function findMe() {
            if (navigator.geolocation != undefined) {
                navigator.geolocation.watchPosition(onFound, onError);
            }
        }
        function onFound(pos) {
            var userLat = pos.coords.latitude;
            var userLong = pos.coords.longitude;
            $('ul li').each(function (index) {
                var locationLat = $(this).find('.lat').html();
                var locationLong = $(this).find('.long').html();
                var distance = getDistance(userLat, locationLat, userLong, locationLong);
                $(this).data("distance", distance);
            })

            reOrder();
        }

        function onError(pos) {
            alert("Something Went wrong");
        }

        function reOrder() {
            $('ul li').sort(sortAlpha).appendTo('ul');
        }

        function sortAlpha(a, b) {
           return $(a).data('distance') > $(b).data('distance') ? 1 : -1;
        };

        function getDistance(lat1, lat2, lon1, lon2) {
            var R = 6371; // km
            var d = Math.acos(Math.sin(lat1) * Math.sin(lat2) +
                  Math.cos(lat1) * Math.cos(lat2) *
                  Math.cos(lon2 - lon1)) * R;
            return d;

        }; 


    </script>
    <style>
        ul .long, ul .lat
        {
            display: none;
        }
    </style>
</head>
<body>
    <div>
        <a href="#" onclick="findMe()">Find Closest Pub</a>
        <ul>
            <li>
                <div class="name">
                    Moe Bar</div>
                <div class="long">
                    47.60357999999998</div>
                <div class="lat">
                    -122.329454</div>
            </li>
            <li>
                <div class="name">
                    Frontier Room</div>
                <div class="long">
                    47.61469022047056</div>
                <div class="lat">
                    -122.34816509008769</div>
            </li>
            <li>
                <div class="name">
                    See Sound</div>
                <div class="long">
                    47.6156159656448</div>
                <div class="lat">
                    -122.32593494177237</div>
            </li>
        </ul>
    </div>
</body>
</html>

Answer 1

以下是实时工作示例：http://jsbin.com/ebeyaz/4/edit

假设：

在我的代码中，列表更容易编码，解释假定这段代码：

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

说明：

您正在使用您甚至没有的data属性进行排序...所以，首先要附加这样的属性。

您已拥有当前的纬度和经度，您只需使用navigator.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;
}

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

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>");
  });
}

然后你可以使用你拥有的东西正常排序。

我的输出：

enter image description here

在地理位置排序上显示英里距离

1 个答案: