javascript - AngularJS $scope in 循环/forEach

Question

我正在编写一个应用程序，允许用户单击一个位置并定向到谷歌地图，一切正常，除了:在这个应用程序中，我有一个表格，我希望能够按距离排序来自用户或按名称，但是，我无法获取要显示的距离。我正在使用半正矢公式来计算到该位置的距离。我用固定坐标测试了公式，公式没有问题。我认为问题在于底部的 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

在代码中，您在 getCoordDistance 函数中声明了 toRad 方法，但在尝试使用 toRad 方法后调用此方法。所以当你想调用它的时候，toRad方法还没有定义。

编辑:

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