上一篇:全城公交标注系统
上一篇提到了如何综合利用mapabc的数据和baidu map地图来实现全城公交标注功能。实践中发现,十分复杂。于是用了一个简单得多的方法实现了我的目标。首先看看效果图:
实现方法分为三个阶段,介绍如下:
(1)准备数据。首先利用js脚本从mapabc.com抓取全北京的公交线路数据和公交站数据。得到数据格式如下:
(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
分享到:
相关推荐
【营销案例】20210204-2020商业广场“全城热恋”活动策划方案.pdf
2021地产项目相亲联谊会“缤纷都会 全城热恋”活动策划方案【七夕】【相亲会】
2021地产项目相亲联谊会“缤纷都会 全城热恋”活动策划方案【七夕】【相亲会】.pptx
补丁源码 刷全城YY 飞行 浮云 欢迎下载使用
全城Smart智慧监控解决方案.doc
全城Smart智慧监控解决方案.pdf
城市智能交通系统总体设计·ITS 城市智能交通系统总体设计全文共21页,当前为第2页。城市智能交通系统总体设计全文共21页,当前为第2页。目录 城市智能交通系统总体设计全文共21页,当前为第2页。 城市智能交通系统...
全城首创人文庭院豪宅产品定位策略.pptx
地产项目金秋大蟹全城活动策划方案.pptx
GTA4全城地图,包括商店,饭馆,街道,武器店,服装店
在志愿者全城大行动启动仪式上的讲话.doc
“全城热驾”——在市区体验电动汽车魅力.pdf
2014年南昌首届迎新春全城商贸促进月活动方案.doc
房地产千人彩跑活动全城狂欢节策划方案.pptx
2018池州首届绿地杯千人彩跑全城狂欢活动方案
金地全城至IN新人大奖赛活动策划方案_23PPT.pptx
[全城爱心帮扶之下这个故事结局温暖]爱心帮扶.rar
舞动全城_2015“同景杯”广场舞大赛策划方案.pdf