资讯专栏INFORMATION COLUMN

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

neuSnail / 317人阅读

摘要:在上一篇移动应用实战构建中,我们构建了我们的服务端,可以通过搜索搜索到结果,这一篇,我们来构建一个简单的搜索。运行如果是要在真机上运行,需要处于同一网段,或者是部署到服务器上。其他服务端代码客户端代码

在上一篇《GIS 移动应用实战 —— Django Haystack ElasticSearch 构建》中,我们构建了我们的服务端,可以通过搜索搜索到结果,这一篇,我们来构建一个简单的搜索。

最后效果如下图所示:

开始之前

如果你没有Ionic的经验,可以参考一下之前的一些文章:《HTML5打造原生应用——Ionic框架简介与Ionic Hello World》。

我们用到的库有:

elasticsearch

ionic

ngCordova

将他们添加到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);
}

当我们点下搜索的时候,调用 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,然后返回解析结果。

运行

如果是要在真机上运行,需要处于同一网段,或者是部署到服务器上。

其他

服务端代码: https://github.com/phodal/django-elasticsearch
客户端代码: https://github.com/phodal/ionic-elasticsearch

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/34030.html

相关文章

  • 地图移动应用实战 —— Django Haystack ElasticSearch 环境准备

    摘要:在一篇中,我们介绍了打造移动应用架构设计。接着,我们就开始实战了,内容也很简单。准备创建虚拟环境创建项目为了方便,这里用的是,相比的主要优势是,以后扩展方便。但是对于也是可以的。则是配置搜索引擎用的。 在一篇中,我们介绍了 《Django ElasticSearch Ionic 打造 GIS 移动应用 —— 架构设计》。接着,我们就开始实战了,内容也很简单。 Django GIS准备...

    oujie 评论0 收藏0
  • Django ElasticSearch Ionic 打造 GIS 移动应用 —— 架构设计

    摘要:采用了的软件设计模式,即模型,视图和控制器。并于年月在许可证下发布。这套框架是以比利时的吉普赛爵士吉他手来命名的。在中被普遍使用,甚至包括配置文件和数据模型。提供了一个免费且开源的移动优化,和组件库,来构建高交互性应用。基于构建和优化。 搜索引擎是个好东西,GIS也是个好东西。当前还有Django和Ionic。最后效果图 showImg(http://www.phodal.com/s...

    tianyu 评论0 收藏0
  • Django ElasticSearch Ionic 打造 GIS 移动应用 —— 架构设计

    摘要:采用了的软件设计模式,即模型,视图和控制器。并于年月在许可证下发布。这套框架是以比利时的吉普赛爵士吉他手来命名的。在中被普遍使用,甚至包括配置文件和数据模型。提供了一个免费且开源的移动优化,和组件库,来构建高交互性应用。基于构建和优化。 搜索引擎是个好东西,GIS也是个好东西。当前还有Django和Ionic。最后效果图 showImg(http://www.phodal.com/s...

    weapon 评论0 收藏0
  • Github连击200天(1)——ShowCase

    摘要:今天是我连续泡在上的第天,也是蛮高兴的,终于达了故事的背影是去年国庆完后要去印度接受毕业生培训就是那个神奇的国度。但是在去之前已经在项目待了九个多月,项目上的挑战越来越少,在印度的时间又算是比较多。管理依赖。。。。 今天是我连续泡在Github上的第200天,也是蛮高兴的,终于达了: showImg(http://www.phodal.com/static/media/uploads...

    gaomysion 评论0 收藏0
  • 全栈工程师的思考 | 步步进阶经验之谈

    摘要:全栈工程师专家人的大脑如同一间空空的阁楼,要有选择地把一些家具装进去。如果他们都是一本书,那么全栈工程师的书是一个索引。如下图所示,左边的关系数据模型即为全栈工程师,右边则为专家。好奇与专家不同的是,全栈工程师更容易被新的技术吸引。 什么是全栈工程师 在现在这一个时代来说,不会有人掌握所有的编程语言、技能,以后应该会有,但是掌握这些全部技术的不是人类了。所以,其实我们需要的是懂得多种...

    SegmentFault 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<