如何在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> 

类似半正弦波：

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) {}); 
    }); 

Post Demo in 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"> 

Working pen