我的实习作品:基于GeoHey地图的学区房应用
2015-08-12 10:07
323 查看
看到GeoHey的数据可视化系列博文以及全新的跨平台地图设计软件Map Designer,作为实习生的我也忍不住想利用GeoHey的地图API鼓捣一个小应用。
1、利用下载的SDK包中的文件
step1:在HTML文件中加入一个显示地图的div
step2:库文件加载完成后,创建一个地图对象
step3:在地图图层上根据数据,添加图形标识
1、创建图层,并添加到地图对象里
2、根据业务需求,调用相关类和事件。例如在图层里,根据数据坐标,添加图形标识
3、给图形对象添加监听事件
有了地图之后,对于学区房和学校的信息需要展示给用户,那如何获取这些数据?如何将关联的学校和校区表示出来?可以利用GeoHey的API.JS来获得,这些数据是GeoHey的公共数据,要想获取这些公共数据,需要获得GeoHey的数据访问权限。首先,我们需要在GeoHey官网注册一个账号,同时添加一个密钥(ak),拥有这个密钥之后就可以使用GeoHey地图的API了。下面,我将简单介绍下公共数据API的使用。
(2) 传入注册时生成的密钥即ak值来初始化类库。代码如下:
(3) 根据业务需求,调用相关的API。例如公共数据API的使用
javascript SDK:http://dist.geohey.com/g-js/latest/doc/index.html
一、为什么想做学区房这个应用呢?
作为学生,我有一个深刻的体会,相信大家都会有同感,从初中、高中到大学,名校一直都让家长们关注有加,为了给孩子争取优质的教育资源,家长们在买房的时候就会优先考虑最合适的学区。最近热播的一个电视《虎妈猫爸》也是再现了现实生活中的场景,父母为了孩子能上名校,千幸万苦地买最近的学区房。所以,为了解决困扰家长们的难题,给他们提供有效的信息,于是就构想了一个搜学区房、学校的应用。通过这个应用,家长们可以看到相关学区房信息和学校信息。例如学校的级别、特色、地址,学校周围的小区,小区的房价、地址、商圈等信息。通过搜索相关的学校,同时可以获得与之相关的小区;反之,搜索相关的小区,可以获得与之相关的学校,这样可以让家长们获得更全面的信息。与此同时,也想让像我一样对基于map应用的爱好者了解下GeoHey地图API的使用,并利用它做一些好玩、好用的产品。二、实现这个APP需要的知识储备
这个APP主要利用地图作为信息载体,通过这种形式可以生动形象地展示学区房、学校的信息。所以,我们首先需要一张地图,如何实现这个呢?通过GeoHey提供的javascriptSDK就可以做到,下面简单介绍下它的使用方法。GeoHey JavaScript SDK的使用
首先,将下载的SDK包中的lib目录下所有的文件与文件夹部署到服务器上,并在HTML文件中引入必需的文件或者直接引用在线库文件,主要是以下两种方式:1、利用下载的SDK包中的文件
<link rel="stylesheet" href="g.css"> <script type="text/javascript" src="g.min.js"></script>2、直接引用在线库文件,而无需下载开发包
<script type="text/javascript" src="http://dist.geohey.com/g-js/latest/lib/g.min.js"></script>
step1:在HTML文件中加入一个显示地图的div
<body> <div id="mapContainer" style="width: 100%; height: 100%;"> </body>
step2:库文件加载完成后,创建一个地图对象
G.ready(function() { // 此时类库加载完成 var map = new G.Map('mapContainer'); var tileLayer = new G.Layer.Tile('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { cluster: ['a', 'b', 'c'] }); tileLayer.addTo(map); });
step3:在地图图层上根据数据,添加图形标识
1、创建图层,并添加到地图对象里
graphicLayer = new G.Layer.Graphic(); graphicLayer.addTo(map);
2、根据业务需求,调用相关类和事件。例如在图层里,根据数据坐标,添加图形标识
var g = new G.Graphic.Point([116.39, 39.9], null, { shape: 'image', //图片类型的标识,也可以是text类型 size: [25, 40], //图片大小 offset: [-12, -40], //图片在X和Y方向上的偏移 image: 'images/pin{i}.png', //图片路径 clickable: true //可点击的标识 }); g.addTo(graphicLayer); //将创建的点标识添加到图层里
3、给图形对象添加监听事件
graphicLayer.addListener('graphicClicked', function(e) { console.log(e.graphic); //点击后触发执行的方法体 });
有了地图之后,对于学区房和学校的信息需要展示给用户,那如何获取这些数据?如何将关联的学校和校区表示出来?可以利用GeoHey的API.JS来获得,这些数据是GeoHey的公共数据,要想获取这些公共数据,需要获得GeoHey的数据访问权限。首先,我们需要在GeoHey官网注册一个账号,同时添加一个密钥(ak),拥有这个密钥之后就可以使用GeoHey地图的API了。下面,我将简单介绍下公共数据API的使用。
GeoHey API.JS的使用
(1) 首先,引进API的JS库文件<script src="//dist.geohey.com/g-api.js/latest/g-api.min.js"></script>
(2) 传入注册时生成的密钥即ak值来初始化类库。代码如下:
GAPI = require('GAPI'); GAPI.init('你在官网注册后添加的ak');
(3) 根据业务需求,调用相关的API。例如公共数据API的使用
1、根据数据的id,利用get方法来获取对象 GAPI.pubdata.get( 'college_bj', //数据集ID '1', //某条数据记录的ID { outFields:"['name','id']" //指定返回数据的部分属性字段 }, function(data){ //获取数据成功之后的方法体 console.log(data) }, function(error){ //获取数据失败的方法体 console.error(error) } ); 2、根据筛选条件,利用query方法查询数据集中符合条件的数据记录 GAPI.pubdata.query( 'college_bj', //数据集ID { limit:10, //限制最多返回结果的数量 outFields:"['name','id']", //指定返回数据的部分属性字段 where:"city='北京'", //数据查询筛选限制条件 searchWords:"['人','民','大','学']" //建立全文索引字段,进行全文检索,注意数据格式为JSON形式表示的字符串 }, function(data){console.log(data)}, //获取数据成功之后的方法体 function(error){console.error(error)} //获取数据失败的方法体 );
三、成果展示
利用GeoHey地图API制作的搜学区、学校应用主要功能、特点和使用方法,详见学区房随手看,部分效果图如下:GeoHey地图API使用起来就是这么简单,小伙伴们,快来试试吧!
附API、SDK访问地址
API.JS:http://dist.geohey.com/g-api.js/latest/doc/index.htmljavascript SDK:http://dist.geohey.com/g-js/latest/doc/index.html
相关文章推荐
- HDU 3226 背包
- Apache+Tomcat集群配置
- HDU 5375 DP
- redis设计与实现
- setsockopt用法详解
- boost------ref的使用(Boost程序库完全开发指南)读书笔记
- NZND壳-设计
- C# 创建自定义集合编辑器/自定义集合属性
- 中国互联网金融协会挂牌在即
- bzoj2821: 作诗(Poetize)
- constants 常量值的使用
- Redis底层数据结构总结
- stdafx.h的作用体会
- 开源中国源码学习(七)——DrawerLayout使用
- android使用自定义控件 IconTabPageIndicator时抛出java.lang.IllegalStateException的解决办法
- 关于推送,你可能忽略的那些事儿
- windows下设备信息管理系列函数——用于设备枚举
- Java程序优化的一些最佳实践(转)
- 人民币主动贬值 你的理财方式主动调整了吗?加上外币兑换的费用,也远不如投资人民币理财产品带来的收益高
- 黑马程序员——Map集合