GZ-subway

广州地铁计价器

功能展示

实现方法

1. 由以上功能展示可看到，我们可以随意切换路线并选择自己要的站点，然后点击查询会返回给用户单程信息以及票价。整个功能的具体逻辑也就这里，从中不难发现，我们所需的地铁数据应该得有的，而且还有所需的各站点之间的距离。（当然我这里是利用地铁各站点间的距离来模拟实现查询票价，如果各开发者有更好的idea，欢迎交流 ）
   所以本人采用了json数据格式，保存了所需的各站点名称以及距离。
   （当然各站点的距离也不是我这个程序猿能获取到的，大部分数据只是模拟效果，其中3号线北延段距离是本人所了解到的真实实际距离，其余为虚拟数据）

var subwayData = {
"1号线": ["西朗", "坑口", "花地湾", "芳村", "黄沙", "长寿路", "陈家祠", "西门口", "公元前", "农讲所", "烈士陵园", "东山口", "杨箕", "体育西路", "体育中心", "广州东站"],
"2号线": ["广州南站", "石壁", "会江", "南浦", "洛溪", "南洲", "东晓南", "江泰路", "昌岗", "江南西", "市二宫", "海珠广场", "公元前", "纪念堂", "越秀公园", "广州火车站", "三元里", "飞翔公园", "白云公园", "白云文化广场", "萧岗", "江夏", "黄边", "嘉禾望岗"],
"3号线": ["番禺广场", "市桥", "汉溪长隆", "大石", "厦滘", "沥滘", "大塘", "客村", "广州塔", "珠江新城", "体育西路", "石牌桥", "岗顶", "华师", "五山", "天河客运站"],
"3号线(北)": ["体育西路", "林和西", "广州东站", "燕塘", "梅花园", "京溪南方医院", "同和", "永泰", "白云大道北", "嘉禾望岗", "龙归", "人和", "机场南站"],

var edgesData = [
["西朗", "坑口", 1.2], ["坑口", "花地湾", 1.2], ["花地湾", "芳村", 1.2], ["芳村", "黄沙", 1.2], ["黄沙", "长寿路", 1.2], ["长寿路", "陈家祠", 1.2], ["陈家祠", "西门口", 1.2], ["西门口", "公元前", 1.2], ["公元前", "农讲所", 1.2], ["农讲所", "烈士陵园", 1.2], ["烈士陵园", "东山口", 1.2], ["东山口", "杨箕", 1.2], ["杨箕", "体育西路", 1.2], ["体育西路", "体育中心", 1.2], ["体育中心", "广州东站", 1.2],
["广州南站", "石壁", 1.2], ["石壁", "会江", 1.2], ["会江", "南浦", 1.2], ["南浦", "洛溪", 1.2], ["洛溪", "南洲", 1.2], ["南洲", "东晓南", 1.2], ["东晓南", "江泰路", 1.2], ["江泰路", "昌岗", 1.2], ["昌岗", "江南西", 1.2], ["江南西", "市二宫", 1.2], ["市二宫", "海珠广场", 1.2], ["海珠广场", "公元前", 1.2], ["公元前", "纪念堂", 1.2], ["纪念堂", "越秀公园", 1.2], ["越秀公园", "广州火车站", 1.2], ["广州火车站", "三元里", 1.2], ["三元里", "飞翔公园", 1.2], ["飞翔公园", "白云公园", 1.2], ["白云公园", "白云文化广场", 1.2], ["白云文化广场", "萧岗", 1.2], ["萧岗", "江夏", 1.2], ["江夏", "黄边", 1.2], ["黄边", "嘉禾望岗", 1.2],
["番禺广场", "市桥", 1.2], ["市桥", "汉溪长隆", 1.2], ["汉溪长隆", "大石", 1.2], ["大石", "厦滘", 1.2], ["厦滘", "沥滘", 1.2], ["沥滘", "大塘", 1.2], ["大塘", "客村", 1.2], ["客村", "广州塔", 1.2], ["广州塔", "珠江新城", 1.2], ["珠江新城", "体育西路", 1.2], ["体育西路", "石牌桥", 1.2], ["石牌桥", "岗顶", 1.2], ["岗顶", "华师", 1.2], ["华师", "五山", 1.2], ["五山", "天河客运站", 1.2],
["体育西路", "林和西", 1.2], ["林和西", "广州东站", 1.2], ["广州东站", "燕塘", 1.2], ["燕塘", "梅花园", 1.8], ["梅花园", "京溪南方医院", 1.4], ["京溪南方医院", "同和", 1.3], ["同和", "永泰", 2], ["永泰", "白云大道北", 0.8], ["白云大道北", "嘉禾望岗", 1.7], ["嘉禾望岗", "龙归", 6.5], ["龙归", "人和", 5.2], ["人和", "机场南站", 5.6],

1. 得到了以上具体的数据后，我们便可以先实现点击选择具体线路以及站点的效果了：

   $j(this).parent().parent().find("em").html($j(this).html()),
   $j(this).parent().parent().find("ul").hide();
   

2. 得到了我们想要去的线路以及站点后，我们便可以点击查询具体的数值了。其实，在我们选择站点的时候，我们有时会出现这样一种情况，那就是点击选择了相同的站点。我们知道在实际中，选择了相同的站点就相当于在原地不动，这是没有任何意义的。不过在我们开发中，要对这种情况进行处理：

   if(start == end)
   return $j(".op-subway-ts").html("亲，您真的需要坐地铁么？").show();
   false;
   

3. 处理了相同站点的情况后，剩下的就只是选择不同站点了，那么不同的站点之间的路程以及费用又该怎么计算呢？这时，本人运用了狄克斯特拉算法（关于该算法之后会在本人博客中详细介绍），获取到想要两个站点之间的最短路径：

   var distance = Dijkstra.shortestPath(start,end),
   

   当然我这是基于最优用户体验来思考，因为一般人就会选择要去地方的最短距离，如果有人说闲得没事，想寻求最长距离，那么就得用另一番逻辑来思考了。得到了我们需要的最短路径后，便可求出具体的费用以及距离了。

4. 在计算具体费用时，本人查阅了最新地铁收费标准，计算出真实费用：

   if(distance<=4)  return 2;
   if(distance<=12) return 2+ Math.ceil((distance-4)/4);
   if(distance<=24) return 4+ Math.ceil((distance-12)/6);
   else return 6+Math.ceil((distance-24)/8)
   

---

• << 上一篇
• 下一篇 >>