1

以下のスニペットの 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>
4

1 に答える 1

2

これがライブの実例です: 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;
}

次に、すべてをループし、結果を使用してその属性を作成します。次に例を示します。

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

次に、持っているものを使用して通常どおり並べ替えることができます。

私の出力：

ここに画像の説明を入力

于 2013-04-03T20:09:48.503 に答える