2

我正在尝试创建一个场所列表，并在页面上的每个列表项旁边设置用户与每个场所的距离。目前，顶部列表项将文本更改为“关闭”，但我知道我不是，所以这不能正常工作，而且它也只针对顶部列表项而不是下面的任何项。

我的代码：

<script type="text/javascript">

      var Geolocation = {
          rad: function (x) { return x * Math.PI / 180 },

          // Distance in kilometers between two points using the Haversine algo.
          haversine: function (p1, p2) {
              var R = 3959 // Earth's mean radius in km.
              var dLat = this.rad(p2.latitude - p1.latitude)
              var dLong = this.rad(p2.longitude - p1.longitude)

              var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
              Math.cos(this.rad(p1.latitude)) * Math.cos(this.rad(p2.latitude)) * Math.sin(dLong / 2) * Math.sin(dLong / 2)
              var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
              var d = R * c

              return Math.round(d)
          },

          // Distance between me and the passed position.

          distance_from: function (position) {
              $('ul li').each(function () {
                  Geolocation.display_location()
                  //-->>Added static location variable<<--

                  var long = $(".link").attr('data-longitude');
                  var lat = $(".link").attr("data-latitude");
                  var current_location = "{ latitude:" + lat + ", longitude:" + long + "}"
                  var distance = Geolocation.haversine(position.coords, current_location)

                  if (distance && distance > 0) $("#distance").text(distance + " m")
                  else $("#user_distance").html("close")
              });
          },


          // Hide spinner and show location.
          display_location: function () {
              $("#user_distance").show()
              $("#geolocating").hide()
          }
      }

      $(function () {

          // Geolocation.
          if (navigator.geolocation) {
              navigator.geolocation.getCurrentPosition(Geolocation.distance_from, Geolocation.display_location)
              navigator.geolocation.watchPosition(Geolocation.distance_from)
          } else {
              Geolocation.display_location()
          }
      });

我的html是：

<ul id="iphone-scroll">
  <li>
    <a name="F"></a>
    <div class="nav-indicator" id="nav-f">F</div>
        <ul>
            <li>

                <a href="#"  class="link"  data-latitude="51.52828" data-longitude="-0.62011" title="Club 1">

                    <div id='location'>
                        <div id='user_distance'>
                           <strong>Club 1</strong>
                           <strong style="float: right" id='distance'></strong>
                        </div>
                    </div>
                </a>

      </li>
   </ul>
    <li>
    <a name="W"></a>
    <div class="nav-indicator" id="nav-w">W</div>
        <ul>
            <li><a href="#" class="link" data-latitude="51.52828" data-longitude="-0.62011" title="club 2"><strong>Club 2</strong></a></li>
        </ul>
    </li>


</ul>

我需要做什么才能完成这项工作？任何帮助将不胜感激。

史蒂夫

4

0 回答 0