javascript - 使用地理坐标，对更靠近用户位置的对象进行排序

Question

我想根据用户在 AngularJS/ionic 应用程序中的位置对数组进行排序。更准确地说，这个想法是对最接近当前用户位置的餐厅进行排名

1/在我的 controller.js 中，我有以下代码来获取用户当前的地理坐标:

var onSuccess = function(position) {
    alert('Latitude: '          + position.coords.latitude          + '\n' +
          'Longitude: '         + position.coords.longitude         + '\n' +
          'Altitude: '          + position.coords.altitude          + '\n' +
          'Accuracy: '          + position.coords.accuracy          + '\n' +
          'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
          'Heading: '           + position.coords.heading           + '\n' +
          'Speed: '             + position.coords.speed             + '\n' +
          'Timestamp: '         + position.timestamp                + '\n');
    console.log(position.coords.latitude )
    console.log(position.coords.longitude)
};


    function onError(error) { // onError Callback receives a PositionError object
        alert('code: '    + error.code    + '\n' +
              'message: ' + error.message + '\n');
    }

    navigator.geolocation.getCurrentPosition(onSuccess, onError);

2/我使用以下 Controller 来显示餐厅列表:

   // RESTAURANTLIST CONTROLLER
    .controller('restaurantlistController', function ($scope, $rootScope, restaurantsFactory) {
    "use strict";
    $scope.restaurantList = restaurantsFactory.getRestaurants(); 
})

3/餐厅存放在本地工厂:

 angular.module('wmapp.factory_restaurants', [])

.factory('restaurantsFactory', function () {
    "use strict";
    var factory = {
            Restaurants : [
                {Name: 'RestA', address: '45 Avenue Ledru-Rollin', cp: '75012', city: 'Paris', country: 'France', lat: 48.8482040, lng: 2.3706140, icon: 'local_icons.restaurantIcon'},
                {Name: 'RestB', address: '3 Rue Mansart', cp: '75009 ', city: 'Paris', country: 'France', lat: 48.8820390, lng: 2.3333150, icon: 'local_icons.restaurantIcon'},
                {Name: 'RestC', address: '41, rue Saint-André des Arts', cp: '75006', city: 'Paris', country: 'France', lat: 48.8532490, lng: 2.3409810, icon: 'local_icons.restaurantIcon'}

 // more restaurant 

            ],
            getRestaurants : function () {
                return factory.Restaurants;
            },
            getRestaurant : function (itemid) {
                var Restaurant = {};
                angular.forEach(factory.Restaurants, function (value, key) {
                    if (value.itemid === itemid) {
                        Restaurant = value;
                    }
                });
                return Restaurant;
            }
        };
    return factory;
});

4/问题:如何在 HTML 餐厅中按照距离用户最近的位置进行排名和显示(可能表示距用户位置的距离(以米为单位)？)

<ion-list>
  <ion-item  ng-controller="loadingCtrl" bindonce  ng-repeat= "restaurant in restaurantList " href="#">

    <article class="item_frame">
        <img class="item_icon_circled" src="img/restauranticonv1redcircled.png">
        <h1 class="item_name_english2">{{restaurant.Name}}</h1>
        <span class="item_description">{{restaurant.subCuisine}}</span>
        <span class="item_description">{{restaurant.venueType}}</span>
        <span class="item_description">{{restaurant.subsubCuisine}}</span>
        <span class="item_description">{{restaurant.address}}</span>
        <span class="item_description">{{restaurant.cp}}</span>
        <span class="item_description">{{restaurant.city}}</span>
    </article><!--main article frame 1 -->  

  </ion-item>
</ion-list>

Answer 1

在 Plunker 上找到并实现了解决方案

controller.js:

 var wmapp = angular.module('wmapp',    ['wmapp.factory_restaurants','greatCircles'])

 // RESTAURANTLIST CONTROLLER
   .controller('restaurantlistController', function ($scope, $rootScope, restaurantsFactory,position,GreatCircle) {
    "use strict";
    $scope.restaurantList = restaurantsFactory.getRestaurants(); //call to restaurantfactory
    $scope.position = position;

    $scope.distanceTo = function(restaurant) {
  var distance = GreatCircle.distance( restaurant.long,restaurant.lat, position.longitude, position.latitude)
  restaurant.distance = distance;
  distance = distance.toFixed(1);
  return distance;
}
})


.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');
    }

    navigator.geolocation.getCurrentPosition(onSuccess, onError);

  return position;

})