学步园

上一篇：全城公交标注系统

上一篇提到了如何综合利用mapabc的数据和baidu map地图来实现全城公交标注功能。实践中发现，十分复杂。于是用了一个简单得多的方法实现了我的目标。首先看看效果图：

实现方法分为三个阶段，介绍如下：

（1）准备数据。首先利用js脚本从mapabc.com抓取全北京的公交线路数据和公交站数据。得到数据格式如下：

var bus_lines = new Array(<br /> [110100011384,"1 路(靛厂新村--四惠)","116.280793,39.88953,116.285411,.....(沿途公交点，略）"]<br /> );</p> <p>var bus_stations = new Array(<br /> [110100011384,"靛厂新村",116.280793,39.88953],<br /> [110100011384,"靛厂村",116.289163,39.889537],<br /> [110100011384,"莲宝路口东",116.296119,39.88955],<br /> [110100011384,"马官营西",116.302096,39.889698],<br /> [110100011384,"马官营",116.306156,39.889928],<br /> [110100011384,"六里桥北",116.310587,39.88786],<br /> [110100011384,"公主坟南",116.310551,39.90272],<br /> [110100011384,"公主坟东",116.312017,39.906172],<br /> [110100011384,"军事博物馆",116.325902,39.907398]<br /> );

（2）将这些数据转化成js可以识别的数据结构，前后使用了两种方式：

    第一种方式：将这些数据格式化成一个js数组，另存为data.js，使用时用<script src="data.js" />导入即可直接使用。该方法实现简单，并且无需服务器端得代码参与，但是缺点却也十分明显：整个data.js占用了11MB的空间，下载速度极慢。利用该方法实现的系统：http://xzaoshu.com/raywill/solu/

    第二种方法：将这些数据格式化成MYSQL，然后利用phpMyAdmin导入到数据库中。该方法的优点是数据载入速度快，用户等待时间较短。缺点也不少，首先需要编写服务器端操作数据库的代码（php+mysql），然后还需要编写客户端的数据获取代码（jquery+json），并且每次查询都需要和服务器交互，每次查询地图都需要等待服务器结果。利用该方法实现的系统：http://xzaoshu.com/raywill/solu2/client/

最后发布版本我们选择了方案2.因为方案一每次下载data.js都需要消耗2~4分钟，实在太长。即使尝试了js压缩，效果也还是不理想。如果选择方案一，所有运算都需要编写js代码，包括定位最近的公交，查找对应公交线路等；选择方案2可以充分利用sql语句来进行查询，十分方便。

（3）编写客户端js代码，将数据显示在地图上。这里因为mapabc.com和百度地图的坐标不一致（貌似所有地图网站的坐标都是各自为政，唉，真是要不得！），所以放弃了使用百度地图，而是直接使用mapabc.com的地图。速度还不错~

有兴趣的可以follow我：http://weibo.com/raywill2