Question

我正在编写一个应用程序，允许用户点击一个位置并被定向到谷歌地图，一切正常，除了：在这个应用程序中，我有一个表，我希望能够按距离排序来自用户或姓名，但是，我无法显示距离。我使用Haversine公式计算到该位置的距离。我用固定坐标测试了公式，公式不是问题。我认为问题在于forEach较长getCoordDistance();和location.Distance = d;在底部。我收到错误消息，指出$scope.myLat，$scope.myLon，$scope.locLat和$scope.locLon未定义，然后我也得到了这个奇怪的错误。

TypeError: undefined is not a function
    at getCoordDistance (http://run.plnkr.co/NDFxGL6q55m1601d/script.js:32490:21)
    at http://run.plnkr.co/NDFxGL6q55m1601d/script.js:32469:7
    at Array.forEach (native)
    at Object.q [as forEach] (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:7:280)
    at new <anonymous> (http://run.plnkr.co/NDFxGL6q55m1601d/script.js:32459:11)
    at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:34:479)
    at Object.instantiate (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:35:103)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:66:467
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:53:250
    at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:7:386)

这是我的代码：
JS：

var app = angular.module('app', []);
app.controller('firstCtrl', function($scope) {

  $scope.ASiteLocs = [{
    "name": "IL5077 BRUSSELS",
    "styleUrl": "#waypoint",
    "Point": {
      "coordinates": "-90.58543899999999,38.955472,0"
    }
  }, {
    "name": "IL5076 KAMPSVILLE",
    "styleUrl": "#waypoint",
    "Point": {
      "coordinates": "-90.661923,39.29403,0"
    }
  }, {
    "name": "IL5146 CARROLLTON",
    "styleUrl": "#waypoint",
    "Point": {
      "coordinates": "-90.39965700000001,39.309142,0"
    }
  }, {
    "name": "IL5153 GREENFIELD",
    "styleUrl": "#waypoint",
    "Point": {
      "coordinates": "-90.208747,39.364077,0"
    }
  }, {
    "name": "MO2766 BRIGHTON",
    "styleUrl": "#waypoint",
    "Point": {
      "coordinates": "-90.14174300000001,39.038493,0"
    }
  }, {
    "name": "IL5221 QUINCY INDUSTRIAL",
    "styleUrl": "#waypoint",
    "Point": {
      "coordinates": "-91.41167299999999,39.912781,0"
    }
  }, {
    "name": "IL5010 QUINCY",
    "styleUrl": "#waypoint",
    "Point": {
      "coordinates": "-91.407062,39.937277,0"
    }
  }, {
    "name": "IL5010P QUINCY",
    "styleUrl": "#waypoint",
    "Point": {
      "coordinates": "-91.407062,39.937277,0"
    }
  }];
  $scope.SSiteLocs = [/*contains more locations*/];
  $scope.SiteLocs = $scope.SSiteLocs.concat($scope.ASiteLocs);
  repoSortOrder = "site.name";
  navigator.geolocation.getCurrentPosition(GetLocation);
  function GetLocation(location) {
    $scope.myLat = location.coords.latitude;
    $scope.myLon = location.coords.longitude;

  }


  angular.forEach($scope.SSiteLocs, function(object) {
    object.carrier = 'Sprint';
  });
  angular.forEach($scope.ASiteLocs, function(object) {
    object.carrier = 'AT&T';
  });

  angular.forEach($scope.SiteLocs, function(location) {
    var clength = location.Point.coordinates.length;
    if (location.Point.coordinates.substring(clength - 2, clength) === ",0") {
      location.Point.coordinates = location.Point.coordinates.substring(0, clength - 2).split(",");
      Lat = location.Point.coordinates[0];
      Lon = location.Point.coordinates[1];
      Com = ",";
      location.Point.coordinates = Lon.concat(Com, Lat);
      $scope.locLat = location.Point.coordinates[0];
      $scope.locLon = location.Point.coordinates[1];
      getCoordDistance();
      location.distance = d;
    }
  });

  function getCoordDistance() {
    Number.prototype.toRad = function() {
      return this * Math.PI / 180;
    }

    var lat2 = $scope.myLat;
    var lon2 = $scope.myLon;
    var lat1 = $scope.locLat;
    var lon1 = $scope.locLon;

    var R = 3959; // Mean Earth radius in miles 
    var x1 = lat2 - lat1;
    var dLat = x1.toRad();
    var x2 = lon2 - lon1;
    var dLon = x2.toRad();
    var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
      Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
      Math.sin(dLon / 2) * Math.sin(dLon / 2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    $scope.d = R * c;
  }
});

和HTML如果重要：

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css" />
    <script data-require="angular.js@*" data-semver="1.2.17" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="google-maps@1.0.0" data-semver="1.0.0" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script data-require="angular-route@*" data-semver="1.2.17" src="http://code.angularjs.org/1.2.17/angular-route.js"></script>
    <script data-require="geo-location-javascript@*" data-semver="0.4.8" src="//cdnjs.cloudflare.com/ajax/libs/geo-location-javascript/0.4.8/geo.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <title>ECC</title>
  </head>

  <body link="white" vlink="white">
    <center>
      <h1>Site Lookup</h1>

      <div>{{site.carrier}}</div>
      <div ng-controller="firstCtrl">
        <input type="text" ng-model="search" border="1" placeholder="Please enter site name..." />
        <select placeholder = "Sort by..." ng-model="repoSortOrder">Sort by
          <option value="site.name">Name</option>
          <option value="site.distance">Distance</option>
        </select>
        <table border="1" width="100%">
          <thead>
            <tr>
              <td>Name</td>
              <td>Distance</td>
              <td>Carrier</td>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="site in SiteLocs | orderBy:'repoSortOrder' | filter : search">
              <td>
                <a ng-href="http://maps.google.com/?q={{site.Point.coordinates}}">
            {{site.name}}
            </a>
              </td>
              <td>{{site.distance}} Miles</td>
              <td>
            {{site.carrier}}
          </td>
            </tr>
          </tbody>
        </table>
      </div>
    </center>
  </body>

</html>

Answer 1

尝试并按如下方式定义：

$ scope.getCoordDistance = function（）{...}

在forEach中调用函数之前定义函数。（用$ scope.getCoordDistance（）调用它）

Answer 2

在您的代码中，您在toRad函数中声明getCoordDistance方法，但在尝试使用toRad方法后调用此方法。因此，当您想要调用它时，尚未定义toRad方法。

编辑：

注释：toRad函数仅适用于数字而坐标不适用。

AngularJS $ scope in loops / forEach

2 个答案: