Piszę aplikację, która pozwoli użytkownikowi kliknąć na lokalizację i wyreżyserować na mapy Google, wszystko działa, ponieważ powinno się opróć: w tej aplikacji mam stół, który chcę być w stanie posortować według użytkownika od użytkownika lub według nazwy, jednak mam problem z uzyskaniem odległości do wyświetlenia. Używam formuły Henersine, aby obliczyć odległość do lokalizacji. Przetestowałem formułę ze stałymi współrzędnymi, a formuła nie jest problemem. Wierzę, że problem leży w dłuższej forEach za pomocą getCoordDistance(); i location.Distance = d; na dole. Otrzymuję błąd mówiąc, że $scope.myLat, $scope.myLon, $scope.locLat, $scope.locLat i $scope.locLon nie są również zdefiniowane, a także otrzymuję ten nieparzysty błąd.

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) 

Oto mój kod:
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;
  }
});

I HTML, jeśli ma znaczenie:

<!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>
0
Ian Pennebaker 14 sierpień 2014, 17:49

2 odpowiedzi

Najlepsza odpowiedź

W swoim kodzie deklarujesz metodę toRad w funkcji getCoordDistance, ale wywołujesz tę metodę po próbie użycia metody toRad. Więc kiedy chcesz go zadzwonić, metoda torada nie jest jeszcze zdefiniowana.

EDYTOWAĆ:

Komentarz: Funkcja Torad działa tylko z liczbą, a współrzędne nie są.

1
Polochon 14 sierpień 2014, 15:03

Spróbuj go zdefiniować tak:

$ scope.getcoorddistance = Funkcja () {...}

I zdefiniuj funkcję, zanim zadzwonisz do niego. (zadzwoń do $ scope.getcoorddistance ())

1
kallehj 14 sierpień 2014, 13:55