今天帮地理所的一个同学做了一个关于百度地图公交路线搜索的东西,就是把各条公交路线汇总在一张图上。本来觉得蛮容易的,后来试了一下,发现将一条公交路线,以及公交站点的信息搜索并显示出来,很容易实现,官方也已经提供了demo,但是将两条或者多条路线放在一起显示出来就有一些困难了。百度地 ...
今天帮地理所的一个同学做了一个关于百度地图公交路线搜索的东西,就是把各条公交路线汇总在一张图上。
本来觉得蛮容易的,后来试了一下,发现将一条公交路线,以及公交站点的信息搜索并显示出来,很容易实现,官方也已经提供了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='/images/loading.gif' data-original="http://api.map.baidu.com/api?v=2.0&ak=WONmQMWf5T6GneZ9lkgF34hz"></script>11 <title>公交/地铁线路查询</title>12 </head>13 <body>14 <p><img src='/images/loading.gif' data-original="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" ></div>16 <div id="r-result" ></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>
原标题:Baidu Map BuslineSearch
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。