Baidu Map BuslineSearch

前几天帮地理所的三个校友做了2个有关百度地图公共交通路线搜索的东西,正是把各条公共交通路线汇总在一张图上。

必发bifa88手机客服端,自然以为蛮不难的,后来试了须臾间,发现将一条公共交通路线,以及公共交通站点的消息搜索并展现出来,很简单完毕,官方也早已提供了demo,可是将两条可能多条路线放在一起展现出来就有一些不方便了。

百度地图提供BusLineSearch()类举办公共交通路线查询,在这几个类中使用getBusLine()方法取得路线并在地形图上绘制。在测试进程中发现,那几个办法没有章程记录在此以前的新闻,也正是说每一趟在赢得之前都会清空上一遍查询到的门道,将新型查询到的路线在地形图上绘制出来。而且,那种格局得到的路子,只是简短的图纸,保存不了地理所的非凡同学所需求的数码格式,所以那几个思路就闲置了。欢迎我们对这几个思路展开填补交换。

既然上一种思路行不通,就换一种想法:获取各条公共交通路线的站点地理地方(GPS坐标)。所谓获取各站点的GPS坐标,便是在公共交通路线查询的底子之上,通过js函数解析获取到的新闻。顾名思义,正是在早就得到到的数据的底蕴之上,分析其数据结构,然后将所必要的音信,包涵公共交通线路的称谓、站点的称谓以及站点的GPS坐标,提取出来。由于时间有限,本来想将音信提取出来之后转成json格式,然后写到本麻芋果件中,按线路名称命名。可是试了二种常用的措施(ActiveXObject())之后,然并卵。就只幸好console中显得出来,后来想到直接的页面中document.writeln()出来,直接复制更有利一些;那样一来,就关系到持续查询的标题,docment.writeln()之后,原有页面数据就不存在,就不或许持续开始展览询问,所以必要再次回到原来的页面,于是就想开利用document.location,reload()函数,重新加载页面,然后继续进行查询。因为本人复制操作,须要有些岁月,所以在必要本身操作的步子前,加上setTimeout()函数,来延时实施接下去的动作。

如上是进展编码的思绪,接下去正是其实的代码。

I.
首先是百度提供的法定demo,在其基础之上,加了有的改动,新增了输入查询框和百度Logo。复制以下代码,在地头新建2个html文件,如map_test.html,用浏览器打开即可。

 1 <html>
 2 <head>
 3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 5     <style type="text/css">
 6         body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
 7         #l-map{height:300px;width:100%;}
 8         #r-result {width:100%;}
 9     </style>
10     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=WONmQMWf5T6GneZ9lkgF34hz"></script>
11     <title>公交/地铁线路查询</title>
12 </head>
13 <body>
14     <p><img src="http://map.baidu.com/img/logo-map.gif" />&nbsp;<input type="text" value="331" id="busId" onkeypress="testEnter()" />路公交&nbsp;<input type="button" value="查询" onclick="busSearch();" /></p>
15     <!-- <div id="l-map" style="float:left;width:600px;height:500px;border:1px solid gray" ></div>
16     <div id="r-result" style="float:left;width:300px;height:500px;font-size:13px;"></div> -->
17     <div id="l-map"></div>
18     <div id="r-result"></div>
19 </body>
20 </html>
21 <script type="text/javascript">
22     // 百度地图API功能
23     var map = new BMap.Map("l-map");            // 创建Map实例
24     map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
25     var fstLine,fstLine_1;
26 
27     var busline = new BMap.BusLineSearch(map,{
28         renderOptions:{map:map,panel:"r-result"},
29             onGetBusListComplete: function(result){
30                if(result) {
31                  fstLine = result.getBusListItem(0);//获取第一个公交列表显示到map上
32                  busline.getBusLine(fstLine);
33                }
34             }
35     });
36     function busSearch(){
37         var busName = document.getElementById("busId").value;
38         busline.getBusList(busName);
39     };
40     function testEnter(){  
41     if(event.keyCode==13) {  
42         busSearch();  
43         return false;  
44         }  
45     } 
46 </script>

II.在浏览器中,打开控制台,一般按F12就足以打开。然后输入以下命令,直接复制回车就足以。下文中的代码是询问“h45”那条公共交通线路的。

 1 var k = 45;
 2 function map_bus()
 3 {
 4     
 5     var busname_head = "h";
 6 
 7     var busName = busname_head + k.toString();//构造查询的公交线路名称
 8     k++;
 9     busline.getBusList(busName);//调用百度API,查询公交线路
10     setTimeout("map_lines()", 5000);//因为如果地图公交路线没有加载出来,继续执行会出错,所以需要先延时一下,等公交路线完全加载出来之后,再继续执行
11 }
12 
13 function map_lines()
14 {
15     var lines = "";
16     var bl = Instance('TANGRAM__n');
17     var amount = bl.gc.tA.length;//公交路线的总数
18 
19     for( var i = 0 ; i < amount ; i++)
20     {
21         var line_name = bl.gc.tA[i].name;//公交路线的名称,如h45路(大地-汤河口)
22 
23         lines = lines + line_name + ": ["
24 
25         bl._selectBusListItem(i);//选择第i条路线
26         var line = bl.Li;
27         for( var j = 0 ; j < line.length ; j++)
28         {
29             var station_position = line[j].point;//公交站点的GPS坐标
30             var station_name = line[j].gB;//公交站点的名称
31             lines = lines + station_name + ": [" + station_position.lat + ","+ station_position.lng + "]," ;
32         }
33         lines = lines.substr(0,lines.length-1);
34         lines = lines + "],"; 
35         lines = lines.substr(0,lines.length-1);
36     }
37     
38     document.writeln(lines);//在页面输出公交路线信息
39     setTimeout(" document.location.reload()", 2000);//等复制操作完成后,重新加载本页面,继续进行查询
40     map_bus();
41 }
42 map_bus();

如上基本就是这一夜间+后日一夜晚的做事。

 

References:

[1]凭借百度地图api下载公共交通音信(本来认为能用上,不过并不曾协助,提供一种思路)

[2]行使代码分析神器logger2js,化解一切难点[百度地图api示例](那篇Blog依旧提供了很多帮衬,不过随后她的来,他的工具怎么都用持续,倒是跟着他的笔触,分析到了数据结构,最后找到了要求的新闻)

相关文章