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