Как получить расстояние и отсортировать по расстоянию в angularjs?

Question

Я пытаюсь определить расстояние между записями и положением пользователя. И закажи это у ближайшего ко мне. Я использую формулу, похожую на hacersine, но я все еще не получаю расстояние. Благодарю.

Мой код HTML:

    <div ng-app="my-app" id="por_logo.html">     
      <ons-page ng-controller="PorlogoCtl">
         <div class="cliente" ng-repeat="cliente in porlogo.clientes" ng-if="cliente.estado == '1'">
      <p>{{cliente.nombre}} <span>{{distancia2}}</span></p>
      </div>       
 </ons-page>
 </div>

Похож на haversine:

function getDistanceFromLatLonInKm(lat1,lon1,lat2,lon2) {
          var R = 6878; // Radius of the earth in km
          var dLat = deg2rad(lat2-lat1);  // deg2rad below
          var dLon = deg2rad(lon2-lon1); 
          var a = 
            Math.sin(dLat/2) * Math.sin(dLat/2) +
            Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * 
            Math.sin(dLon/2) * Math.sin(dLon/2)
            ; 
          var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
          var d = R * c; // Distance in km
          return d;
        };
        function deg2rad(deg) {
          return deg * (Math.PI/180)
        };

Код JS:

var app = angular.module('my-app', ['onsen']).factory('position', function( $rootScope ){

        // console.log('building position')
        var position = {};

          // 1ST / AUTO GEOLOCATION OF USER 
          // displays a popup to indicate current user location - (disabled)
          // onSuccess Callback - This method accepts a Position object, which contains the current GPS coordinates
         var onSuccess = function(position2) {

              console.log(position2.coords.latitude )
              console.log(position2.coords.longitude)

              position.latitude = position2.coords.latitude;
              position.longitude = position2.coords.longitude;
              $rootScope.$digest()
          };

        function onError(error) { // onError Callback receives a PositionError object
            // alert('code: '    + error.code    + '\n' +
                  // 'message: ' + error.message + '\n');
                  alert('No podemos acceder a su ubicación');
        }

        navigator.geolocation.getCurrentPosition(onSuccess, onError);

      return position;

    });
    app.controller("PorlogoCtl", function($scope, $http, position, $rootScope) {
      $http.get('https://viveenunclick.com/api.php/clientes?transform=1').
      success(function(data, status, headers, config) {
        $scope.porlogo = data;
        $rootScope.latitude = position.latitude;
        $rootScope.longitud = position.longitude;
        $rootScope.distancia2 = getDistanceFromLatLonInKm(position.latitude,position.longitude,$rootScope.latitude,$rootScope.longitud).toFixed(1);
        console.log($rootScope.longitud);
      }).
      error(function(data, status, headers, config) {});
    });

Опубликовать демо в Codepen

Answer 1

Координаты находятся в возвращенных данных, вы получите его: $scope.porlogo[iteration].Latitud & $scope.porlogo[iteration].Longitud

Таким образом, чтобы иметь тезисы, вы должны повторить. Вы можете использовать итерацию в представлении:

 <p>{{cliente.nombre}} <span>{{distancia(cliente)}}</span></p>

и в вашем контроллере добавьте эту функцию distancia, чтобы получить правильное расстояние:

Важно: Но если вам нужно использовать toFixed(1), который возвращает строку (порядок будет по строке), вам нужно добавить parseFloat(), чтобы он возвращал число, и порядок будет правильным.

$scope.distancia = function(item) {
    //it's item.Latitud & item.Longitud, from the data
    return parseFloat(getDistanceFromLatLonInKm(position.latitude,position.longitude,item.Latitud,item.Longitud).toFixed(1));
}

Вы также можете использовать эту функцию для сортировки и заказа,

<div class="cliente" ng-repeat="cliente in porlogo.clientes | orderBy: distancia: false">

Рабочая ручка