地图移动应用实战：Ionic ElasticSearch 搜索服务-白红宇

地图移动应用实战：Ionic ElasticSearch 搜索服务

阅读量：7081 次

发布时间：2019-06-28

本文共 2717 字，大约阅读时间需要 9 分钟。

在上一篇中，我们构建了我们的服务端，可以通过搜索搜索到结果，这一篇，我们来构建一个简单的搜索。

最后效果如下图所示:

Ionic ElasticSearch

开始之前

如果你没有Ionic的经验，可以参考一下之前的一些文章:。

我们用到的库有:

elasticsearch

ionic

ngCordova

将他们添加到bower.json，然后

bower install

吧

Ionic ElasticSearch 创建页面

1.引入库

在index.html中添加

接着开始写我们的搜索模板tab-search.html

html

显示部分

xml 
                    
                         
      {
   {result.title}}
                    
      简介: {
   {result.body}}
                    
      
                               {
   {result.location_info}}                    
      
                    
                              
       {
   {result.phone_number}}

而我们期待的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);}

当我们点下搜索的时候，调用 ESService.

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    };  }]);

这个Service主要做的是创建ElasitcSearch Query，然后返回解析结果。