Blog

Blog

PHODAL

google map solr polygon 搜索

记录一下自己做的一个小东西,当然你也可以在github上找到它:https://github.com/phodal/gmap-solr

Solr

Solr是一个高性能,采用Java5开发,基于Lucene的全文搜索服务器。同时对其进行了扩展,提供了比Lucene更为丰富的查询语言,同时实现了可配置、可扩展并对查询性能进行了优化,并且提供了一个完善的功能管理界面,是一款非常优秀的全文搜索引擎。

简单地说: 它是一个搜索引擎

文档通过Http利用XML 加到一个搜索集合中。查询该集合也是通过http收到一个XML/JSON响应来实现。它的主要特性包括:高效、灵活的缓存功能,垂直搜索功能,高亮显示搜索结果,通过索引复制来提高可用性,提供一套强大Data Schema来定义字段,类型和设置文本分析,提供基于Web的管理界面等。

即schema.xml

Solr 安装

brew install solr

Gmap Solr Polygon 搜索实战

思路:

用Flask搭建一个简单的servrices,接着在前台用google的api,对后台发出请求。

Solr Flask

由于,直接调用的是Solr的接口,所以我们的代码显得比较简单:

class All(Resource):
    @staticmethod
    def get():
        base_url = ''
        url = (base_url + 'select?q=' + request.query_string + '+&wt=json&indent=true')
        result = requests.get(url)
        return (result.json()['response']['docs']), 201, {'Access-Control-Allow-Origin': '*'}


api.add_resource(All, '/geo/')

我们在前台需要做的便是,组装geo query。

Google map Polygon

在Google Map的API是支持Polygon搜索的,有对应的一个

google.maps.event.addListener(drawingManager, 'polygoncomplete', renderMarker);

函数来监听,完成polygoncomplete时执行的函数,当我们完成搜索时,便执行renderMarker,在里面做的便是:

$.get('/geo/?' + query, function (results) {
        for (var i = 0; i < results.length; i++) {
            var location = results[i].geo[0].split(',');
            var myLatLng = new google.maps.LatLng(location[0], location[1]);
            var title = results[i].title;
            marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title: title
            });

            contentString = '<h1>City</h1><br/> address ' + i + '';

            google.maps.event.addListener(marker, 'click', (function (marker, contentString, infowindow) {
                return function () {
                    infowindow.setContent(contentString);
                    infowindow.open(map, marker);
                };
            })(marker, contentString, infowindow));
        }
    });

对应的去解析数据,并显示在地图上


或许您还需要下面的文章:

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签