昨天,偶然间脑洞大开,想做一个O2O的约基应用。
用户故事
作为这样一个基于GayHub的应用,首先我们应该在地球上标示出中国:
然后,我应该打开离我最近的那个省,看看这个省有多少人使用GitHub:
然后,我们再到这个市里面,按不同的区来找人:
现在,我们已经锁定了一个目标:
这样的过程太麻烦了,最好能获取我当前地理位置,然后算出距离:
然后我们就可以开始实战了。
实战
之前用过AMMAP、CartoDB、OpenLayer等等的一些地图库,这次用的是之前想用的Leaflet:
然后,从GitHub上搜索到了一个包含中国地图的GeoJSON,从省到市,再到区和县。无奈的是,光只有这个图太丑了,只好加上Mapbox。
这地图只是太可爱了~~
这地图只是太可爱了~~
这地图只是太可爱了~~
然后,再结合Bootstrap和jQuery:
我们就有了一个简单的页面了,并且可以有一个显示Popup的Modal。
现在,我们需要一些用户数据——如姓名、GitHub用户名、以及用户公司的经纬度:
把这些用户变成一个个的Marker、显示到地图上:
再通过HTML5的geolocation API 来获取用户当前的经纬度:
最后,我们就可以计算他们的距离了,并获取最短的那个用户:
并且,我们还可以使用多边形搜索 :
? ? ? ?
当前上面只有十几条数据,如果你愿意的话,不烦也将你的数据放在上面吧。
Blabla~~,更多精彩内容请关注
点击“阅读原文”,在线预览