地図移動応用実戦:Ionic ElasticSearch検索サービス
4128 ワード
前回の「GISモバイルアプリケーション実戦-Django Haystack ElasticSearch構築」では、検索結果を検索することで、簡単な検索を構築するサービス・エンドを構築しました.
最後の効果は次の図のようになります.
開始前
Ionicの経験がない場合は、以前の記事を参考にしてみてください.「HTML 5のオリジナルアプリケーション-Ionicフレームワークの概要とIonic Hello World」です.
使用するライブラリは次のとおりです. elasticsearch ionic ngCordova
ああ
Ionic ElasticSearch作成ページ
1.ライブラリの導入
テンプレート
セクションの
たちが している
をクリックすると、ESServicesが び されます.
Ionic ElasticSearch Service
に、ESServiceを します. の はネット から ています.
このサービスは にElasitcSearch Queryを し、 を します.
うんてん
ホスト で する は、 じセグメントに するか、サーバに する があります.
その
サービス コード:https://github.com/phodal/django-elasticsearchクライアントコード:https://github.com/phodal/ionic-elasticsearch
最後の効果は次の図のようになります.
開始前
Ionicの経験がない場合は、以前の記事を参考にしてみてください.「HTML 5のオリジナルアプリケーション-Ionicフレームワークの概要とIonic Hello World」です.
使用するライブラリは次のとおりです.
bower.json
に追加し、bower install
ああ
Ionic ElasticSearch作成ページ
1.ライブラリの導入
index.html
に追加
テンプレート
tab-search.html
を き めましたhtml
セクションの
xml
{{result.title}}
: {{result.body}}
{{result.location_info}}
たちが している
SearchCtrl
はこうです$scope.query = "";
var doSearch = ionic.debounce(function(query) {
ESService.search(query, 0).then(function(results){
$scope.results = results;
});
}, 500);
$scope.search = function(query) {
doSearch(query);
}
をクリックすると、ESServicesが び されます.
Ionic ElasticSearch Service
に、ESServiceを します. の はネット から ています.
angular.module('starter.services', ['ngCordova', 'elasticsearch'])
.factory('ESService',
['$q', 'esFactory', '$location', '$localstorage', function($q, elasticsearch, $location, $localstorage){
var client = elasticsearch({
host: $location.host() + ":9200"
});
var search = function(term, offset){
var deferred = $q.defer(), query, sort;
if(!term){
query = {
"match_all": {}
};
} else {
query = {
match: { title: term }
}
}
var position = $localstorage.get('position');
if(position){
sort = [{
"_geo_distance": {
"location": position,
"unit": "km"
}
}];
} else {
sort = [];
}
client.search({
"index": 'haystack',
"body": {
"query": query,
"sort": sort
}
}).then(function(result) {
var ii = 0, hits_in, hits_out = [];
hits_in = (result.hits || {}).hits || [];
for(;ii < hits_in.length; ii++){
var data = hits_in[ii]._source;
var distance = {};
if(hits_in[ii].sort){
distance = {"distance": parseFloat(hits_in[ii].sort[0]).toFixed(1)}
}
angular.extend(data, distance);
hits_out.push(data);
}
deferred.resolve(hits_out);
}, deferred.reject);
return deferred.promise;
};
return {
"search": search
};
}]
);
このサービスは にElasitcSearch Queryを し、 を します.
うんてん
ホスト で する は、 じセグメントに するか、サーバに する があります.
その
サービス コード:https://github.com/phodal/django-elasticsearchクライアントコード:https://github.com/phodal/ionic-elasticsearch