我的实习首秀:学区房APP

Aug 12, 2015

看到GeoHey的数据可视化系列博文以及全新的跨平台地图设计软件Map Designer,实习生的我也忍不住想利用GeoHey的地图API鼓捣一个小应用。

一、为什么想做学区房这个应用呢?

作为学生,我有一个深刻的体会,相信大家都会有同感,从初中、高中到大学,名校一直都让家长们关注有加,为了给孩子争取优质的教育资源,家长们在买房的时候就会优先考虑最合适的学区。最近热播的一个电视《虎妈猫爸》也是再现了现实生活中的场景,父母为了孩子能上名校,千幸万苦地买最近的学区房。所以,为了解决困扰家长们的难题,给他们提供有效的信息,于是就构想了一个搜学区房、学校的应用。通过这个应用,家长们可以看到相关学区房信息和学校信息。例如学校的级别、特色、地址,学校周围的小区,小区的房价、地址、商圈等信息。通过搜索相关的学校,同时可以获得与之相关的小区;反之,搜索相关的小区,可以获得与之相关的学校,这样可以让家长们获得更全面的信息。与此同时,也想让像我一样对基于map应用的爱好者了解下GeoHey地图API的使用,并利用它做一些好玩、好用的产品。

二、实现这个APP需要的知识储备

这个APP主要利用地图作为信息载体,通过这种形式可以生动形象地展示学区房、学校的信息。所以,我们首先需要一张地图,如何实现这个呢?通过GeoHey提供的javascript SDK就可以做到,下面简单介绍下它的使用方法。

GeoHey JavaScript SDK的使用

首先,将下载的SDK包中的lib目录下所有的文件与文件夹部署到服务器上,并在HTML文件中引入必需的文件或者直接引用在线库文件,主要是以下两种方式:

1、利用下载的SDK包中的文件
  <link rel="stylesheet" href="g.css">
  <script type="text/javascript" src="g.min.js"></script>

2、直接引用在线库文件,而无需下载开发包
  <link rel="stylesheet" href="http://dist.geohey.com/g-js/latest/lib/g.css">
  <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的使用。 ak

GeoHey API.JS的使用
  • 首先,引进API的JS库文件
<script src="//dist.geohey.com/g-api.js/latest/g-api.min.js"></script>
  • 传入注册时生成的密钥即ak值来初始化类库。代码如下
GAPI = require('GAPI');
GAPI.init('OWIwMWUwZmI3YWIyNDNhNDgwNzI4MmU0NmFjYTY3YjU');
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.html
javascript SDK:http://dist.geohey.com/g-js/latest/doc/index.html

评论正在加载...
Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.
分享