有了他,和编程大牛面基不在话下

昨天,偶然间脑洞大开,想做一个O2O的约基应用。

用户故事

作为这样一个基于GayHub的应用,首先我们应该在地球上标示出中国:

有了他,和编程大牛面基不在话下

然后,我应该打开离我最近的那个省,看看这个省有多少人使用GitHub:

有了他,和编程大牛面基不在话下

然后,我们再到这个市里面,按不同的区来找人:

现在,我们已经锁定了一个目标:

这样的过程太麻烦了,最好能获取我当前地理位置,然后算出距离:

然后我们就可以开始实战了。

实战

之前用过AMMAP、CartoDB、OpenLayer等等的一些地图库,这次用的是之前想用的Leaflet:



然后,从GitHub上搜索到了一个包含中国地图的GeoJSON,从省到市,再到区和县。无奈的是,光只有这个图太丑了,只好加上Mapbox。

这地图只是太可爱了~~

这地图只是太可爱了~~

这地图只是太可爱了~~

然后,再结合Bootstrap和jQuery:

我们就有了一个简单的页面了,并且可以有一个显示Popup的Modal。

现在,我们需要一些用户数据——如姓名、GitHub用户名、以及用户公司的经纬度:

把这些用户变成一个个的Marker、显示到地图上:

再通过HTML5的geolocation API 来获取用户当前的经纬度:

最后,我们就可以计算他们的距离了,并获取最短的那个用户:

并且,我们还可以使用多边形搜索 :

   

当前上面只有十几条数据,如果你愿意的话,不烦也将你的数据放在上面吧。

Blabla~~,更多精彩内容请关注

点击“阅读原文”,在线预览

阅读原文

有了他,和编程大牛面基不在话下》来自互联网,仅为收藏学习,如侵权请联系删除。本文URL:http://www.hashtobe.com/4051.html