Baidu Map BuslineSearch
今天帮地理所的一个同学做了一个关于百度地图公交路线搜索的东西，就是把各条公交路线汇总在一张图上。
本来觉得蛮容易的，后来试了一下，发现将一条公交路线，以及公交站点的信息搜索并显示出来，很容易实现，官方也已经提供了demo，但是将两条或者多条路线放在一起显示出来就有一些困难了。
百度地图提供BusLineSearch()类进行公交路线查询，在这个类中使用getBusLine()方法获取路线并在地图上绘制。在测试过程中发现，这个方法没有办法记录之前的信息，也就是说每次在获取之前都会清空上一次查询到的路线，将最新查询到的路线在地图上绘制出来。而且，这种方法获取的路线，只是简单的图片，保存不了地理所的那个同学所需要的数据格式，所以这个思路就搁置了。欢迎大家对这个思路进行补充交流。
既然上一种思路行不通，就换一种想法：获取各条公交路线的站点地理位置（GPS坐标）。所谓获取各站点的GPS坐标，就是在公交路线查询的基础之上，通过js函数解析获取到的信息。顾名思义，就是在已经获取到的数据的基础之上，分析其数据结构，然后将所需要的信息，包括公交线路的名称、站点的名称以及站点的GPS坐标，提取出来。由于时间有限，本来想将信息提取出来之后转成json格式，然后写到本地文件中，按线路名称命名。但是试了几种常用的方法（ActiveXObject()）之后，然并卵。就只好在console中显示出来，后来想到直接的页面中document.writeln()出来，直接复制更方便一些；这样一来，就涉及到继续查询的问题，docment.writeln()之后，原有页面数据就不存在，就无法继续进行查询，所以需要回到原来的页面，于是就想到使用document.location,reload()函数，重新加载页面，然后继续进行查询。因为自己复制操作，需要一些时间，所以在需要自己操作的步骤前，加上setTimeout()函数，来延时执行接下来的动作。
以上是进行编码的思路，接下来就是实际的代码。
I. 首先是百度提供的官方demo，在其基础之上，加了一些修改，新增了输入查询框和百度Logo。复制以下代码，在本地新建一个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" /><span style="display:inline-block;width:200px;"> </span><input type="text" value="331" id="busId" onkeypress="testEnter()" />路公交 <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还是提供了不少帮助，但是跟着他的来，他的工具怎么都用不了，倒是跟着他的思路，分析到了数据结构，最终找到了需要的信息)
