如何在 angularjs 中获取距离并按距离排序?
how to get distance and sort by distance in angularjs?
我正在尝试获取记录与用户位置之间的距离。并由离我最近的人订购。
我正在使用类似于 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) {});
});
坐标在数据 returned 中,您将通过以下方式获取:$scope.porlogo[iteration].Latitud
& $scope.porlogo[iteration].Longitud
所以要有论文,你需要迭代。您可以在视图中使用迭代:
<p>{{cliente.nombre}} <span>{{distancia(cliente)}}</span></p>
然后在您的控制器中,将此距离功能添加到 return 正确的距离:
重要: 但是如果你需要使用 toFixed(1) 其中 return 一个字符串(顺序将由一个字符串),你需要添加 parseFloat() 所以它将 return 一个数字和顺序将是正确的。
$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">
我正在尝试获取记录与用户位置之间的距离。并由离我最近的人订购。 我正在使用类似于 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) {});
});
坐标在数据 returned 中,您将通过以下方式获取:$scope.porlogo[iteration].Latitud
& $scope.porlogo[iteration].Longitud
所以要有论文,你需要迭代。您可以在视图中使用迭代:
<p>{{cliente.nombre}} <span>{{distancia(cliente)}}</span></p>
然后在您的控制器中,将此距离功能添加到 return 正确的距离:
重要: 但是如果你需要使用 toFixed(1) 其中 return 一个字符串(顺序将由一个字符串),你需要添加 parseFloat() 所以它将 return 一个数字和顺序将是正确的。
$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">