Javascript Angular JS-使用地理位置对集合进行排序
我正在呈现包含坐标数据（经度、纬度）的存储位置集合。我想使用用户的地理位置对结果进行排序，特别是按最近的商店位置排序。就上下文而言，该应用程序旨在让人们更容易找到（在加拿大）安装有他们想要的iPhone的苹果专卖店： 我正在使用angularjs geolocation包装器（）获取访问者的lat/lng，但我不确定在获取后如何使用用户的geolocation以及Angular的orderBy指令动态访问集合。（我想根据壁橱的接近程度进行排序，这是我在Javascript中很熟悉的计算方法。）这可能是一个简单的问题，但对于Angular来说是个新手，我仍在尝试确定方向。以下是目前为止的控制器：Javascript Angular JS-使用地理位置对集合进行排序,javascript,angularjs,geolocation,Javascript,Angularjs,Geolocation,我正在呈现包含坐标数据（经度、纬度）的存储位置集合。我想使用用户的地理位置对结果进行排序，特别是按最近的商店位置排序。就上下文而言，该应用程序旨在让人们更容易找到（在加拿大）安装有他们想要的iPhone的苹果专卖店： 我正在使用angularjs geolocation包装器（）获取访问者的lat/lng，但我不确定在获取后如何使用用户的geolocation以及Angular的orderBy指令动态访问集合。（我想根据壁橱的接近程度进行排序，这是我在Javascript中很熟悉的计算方法。）
angular.module('InventoryApp')
.controller('searchController', ['$scope', 'searchService', 'geolocation', function(scope, searchService, geolocation){
scope.model_ids = model_ids;
scope.store_ids = store_ids;
scope.address = '';
scope.find = '';
scope.position = null;
scope.refreshLocation = function () {
geolocation.getLocation().then(function(data){
scope.coords = { lat:parseFloat(data.coords.latitude.toFixed(6)), lng:parseFloat(data.coords.longitude.toFixed(6)) };
var geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(scope.coords.lat, scope.coords.lng);
geocoder.geocode({ 'latLng': latlng }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
scope.address = results[0].formatted_address;
} else {
scope.address = 'Address not found';
}
} else {
scope.address = 'Geocoder failed due to: ' + status;
}
scope.$digest();
});
});
};
scope.search = function () {
searchService.update().success(function (stores) {
scope.stores = stores;
});
};
scope.refreshLocation();
scope.search();
}])
.factory('searchService', ['$http', function(http){
return {
update: function () {
return http.get('/inventory');
}
}
}])
那么，关于如何在Angular JS中构建它，有什么想法吗 我认为AngularJS没有太大区别。我举了一个例子。它使用GooglePlacesAPI进行搜索。需要Map（Map=new google.maps.Map），因为没有它PlacesAPI就无法工作。如果您的地理位置被禁用，它将不起作用。它使用Google map geometry API以米为单位计算距离，并使用orderBy过滤器对商店进行排序
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
<script src="https://raw.githubusercontent.com/arunisrael/angularjs-geolocation/master/dist/angularjs-geolocation.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&v=3&libraries=geometry,places"></script>
<style>
.check-yes {
background-color: green;
}
</style>
</head>
<body ng-app="plunker">
<div id="map-canvas"></div>
<div ng-controller="searchController">
Search for: <input type="text" ng-model="searchText"> <button ng-click="search()">Search</button>
<ul>
<li ng-repeat="store in stores | orderBy:'distance'">
{{store.name}} ({{store.distance}} metres)
</li>
</ul>
</div>
<script>
var app = angular.module('plunker', ['geolocation']);
app.controller('searchController', ['$scope', 'searchService', 'geolocation', function(scope, searchService, geolocation){
scope.address = '';
scope.find = '';
scope.position = null;
scope.stores = [];
scope.searchText = '';
scope.refreshLocation = function () {
geolocation.getLocation().then(function(data){
scope.coords = { lat:parseFloat(data.coords.latitude.toFixed(6)), lng:parseFloat(data.coords.longitude.toFixed(6)) };
var geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(scope.coords.lat, scope.coords.lng);
scope.position = latlng;
scope.search();
geocoder.geocode({ 'latLng': latlng }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
scope.address = results[0].formatted_address;
} else {
scope.address = 'Address not found';
}
} else {
scope.address = 'Geocoder failed due to: ' + status;
}
scope.$digest();
});
});
};
scope.search = function () {
if (!scope.position) {
alert('Please share your location to search');
}
searchService.update(setStores, scope.position, scope.searchText);
};
var setStores = function (stores) {
scope.stores = stores;
calculateDistance();
scope.$apply();
}
var calculateDistance = function () {
for (var id in scope.stores) {
var store = scope.stores[id];
var storeLocation = new google.maps.LatLng(store.geometry.location.lat(), store.geometry.location.lng());
var distance = google.maps.geometry.spherical.computeDistanceBetween(scope.position, storeLocation);
store.distance = parseInt(distance);
}
}
scope.refreshLocation();
}]).factory('searchService', ['$http', function(http){
return {
update: function (callback, position, text) {
var url = 'https://maps.googleapis.com/maps/api/place/nearbysearch/json';
var params = {
location: position,
radius: 2500,
types: ['store']
};
if (text) {
params['name'] = text;
}
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: position,
zoom: 15
});
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(params, callback);
}
}
}]);
</script>
</body>
</html>
1.是的{
背景颜色：绿色；
}
搜索：搜索
-
{{store.name}}（{{store.distance}}米）
var app=angular.module（'plunker'，['geolocation']）；
app.controller（'searchController'，['$scope'，'searchService'，'geolocation'，函数（scope，searchService，geolocation）{
scope.address=''；
scope.find=''；
scope.position=null；
scope.stores=[]；
scope.searchText=''；
scope.refreshLocation=函数（）{
geolocation.getLocation（）.then（函数（数据）{
scope.coords={lat:parseFloat（data.coords.latitude.toFixed（6）），lng:parseFloat（data.coords.longitude.toFixed（6））；
var geocoder=new google.maps.geocoder（）；
var latlng=新的google.maps.latlng（scope.coords.lat，scope.coords.lng）；
scope.position=车床；
scope.search（）；
geocoder.geocode（{'latLng'：latLng}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
如果（结果[0]）{
scope.address=结果[0]。格式化的\u地址；
}否则{
scope.address='未找到地址'；
}
}否则{
scope.address='地理编码器失败，原因是：'+状态；
}
范围。$digest（）；
});
});
};
scope.search=函数（）{
如果（！范围位置）{
警报（“请共享您要搜索的位置”）；
}
searchService.update（设置存储、scope.position、scope.searchText）；
};
var设置存储=功能（存储）{
scope.stores=商店；
计算站（）；
作用域：$apply（）；
}
var calculateInstance=函数（）{
for（scope.stores中的变量id）{
var store=scope.stores[id]；
var storeLocation=new google.maps.LatLng（store.geometry.location.lat（），store.geometry.location.lng（））；
var distance=google.maps.geometry.sphere.ComputedDistanceBeween（scope.position，storeLocation）；
store.distance=parseInt（距离）；
}
}
scope.refreshLocation（）；
}]).factory（'searchService'，['$http'，函数（http）{
返回{
更新：函数（回调、位置、文本）{
var url='1〕https://maps.googleapis.com/maps/api/place/nearbysearch/json';
变量参数={
地点:位置,，
半径：2500，
类型：['store']
};
如果（文本）{
参数['name']=文本；
}
map=new google.maps.map（document.getElementById（'map-canvas'）{
中锋:位置,，
缩放：15
});
var service=newgoogle.maps.places.PlacesService（地图）；
service.nearbySearch（参数、回调）；
}
}
}]);