原文:

任务描述：

　　有位在魏公村附近上小学的小朋友，要去北京邮电大学找哥哥。他身上钱很少，只够坐公交的。所以，百度地图API快帮帮他吧！

如何实现：

　　把地图中心定在魏公村，在视野范围内搜索小学。

　　搜索完毕后，点击出现的红色标注，在输入框中输入北京邮电大学，然后查询，即可得到公交路线图。

图示：

运行代码，点击。

点击公交按钮需要做的查询工作。

在这里，请大家一定注意，所有公交查询，只创建一次对象。不然会有很大的内存消耗哦~

//

公交线路查询

function

tSearch()

{

//

请不要在查询的时候创建公交对象

if

(curTitle.length

>

0

)

{

var

dest

=

document.getElementById(

"

txtDest

"

).value;

ts.search(curTitle,dest);

}

}

创建公交对象，最好和地图初始化一起做。这样能保证只创建一次公交对象。

var

map

=

new

BMap.Map(

"

container

"

);

map.centerAndZoom(

new

BMap.Point(

116.330599

,

39.95536

),

16

);

var

curTitle

=

""

;

//

一定要先建立一个公交查询的对象，以后都只用这个对象，不要再次创建了。

var

ts

=

new

BMap.TransitRoute(map,{

renderOptions:{

map:map,

panel:

"

divResult

"

}

});

全部代码：

<!

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

>

<

html

xmlns

="http://www.w3.org/1999/xhtml"

>

<

head

>

<

meta

http-equiv

="Content-Type"

content

="text/html; charset=gb2312"

/>

<

title

>

酸奶小妹——百度地图API学习

</

title

>

<

meta

http-equiv

="X-UA-Compatible"

content

="IE=EmulateIE7"

/>

<

script

type

="text/javascript"

src

="http://api.map.baidu.com/api?key=25f144bb4491f54b83a7a7b39198c11e&v=1.1&services=true"

></

script

>

<

link

rel

="stylesheet"

type

="text/css"

href

="http://ui-love.com/baidumap/base.css"

media

="screen"

/>

</

head

>

<

body

>

<

div

class

="wrapper"

>

<

div

class

="header"

>

<

h1

>

公交查询

</

h1

>

<

p

><

span

class

="f-r"

>

2011-01-14

</

span

>

任务描述:

</

p

>

<

p

>

首先，周边查询，比如“小学”；

<

br

/>

然后，点击任一个红色标注；

<

br

/>

弹出信息窗口中，输入需要前往的地址，比如“北京邮电大学”,点击“前往”;

即可出现公交乘坐路线。

</

p

>

</

div

>

<

div

class

="container clearfix"

>

<

div

class

="clearfix"

><

input

id

="txtSearch"

type

="text"

value

="小学"

/><

input

type

="button"

value

="查询"

onclick

="search()"

/></

div

>

<

div

class

="myMap f-l"

id

="container"

></

div

>

<

div

id

="divResult"

class

="myMap myMap2 f-l"

></

div

>

</

div

>

<

div

class

="footer"

>

<

span

class

="f-r"

>

COPYRIGHT

&copy;

酸奶小妹

</

span

>

<

span

>

友情链接:

<

a

target

="_blank"

href

="http://openapi.baidu.com/map/index.html"

>

百度地图API

</

a

>

|

<

a

target

="_blank"

href

="http://tieba.baidu.com/f?kw=%B0%D9%B6%C8%B5%D8%CD%BCapi&fr=tb0_search&ie=utf-8"

>

百度地图API贴吧

</

a

>

|

<

a

target

="_blank"

href

="http://map.baidu.com/"

>

百度地图

</

a

>

|

<

a

target

="_blank"

href

="http://www.cnblogs.com/milkmap/"

>

酸奶小妹

</

a

>

</

span

>

</

div

>

</

div

>

</

body

>

<

script

type

="text/javascript"

>

var

map

=

new

BMap.Map(

"

container

"

);

map.centerAndZoom(

new

BMap.Point(

116.330599

,

39.95536

),

16

);

var

curTitle

=

""

;

//

一定要先建立一个公交查询的对象，以后都只用这个对象，不要再次创建了。

var

ts

=

new

BMap.TransitRoute(map,{

renderOptions:{

map:map,

panel:

"

divResult

"

}

});

function

search()

{

var

s

=

document.getElementById(

"

txtSearch

"

);

var

ls

=

new

BMap.LocalSearch(map,{pageCapacity:

20

});

//

设置回调函数

ls.setSearchCompleteCallback(

function

(result){

map.clearOverlays();

//

清除所有覆盖物

//

自己添加对应的覆盖物

if

(ls.getStatus()

==

BMAP_STATUS_SUCCESS)

{

//

result为LocalResult类型

var

curNum

=

result.getCurrentNumPois();

for

(

var

i

=

0

;i

<

curNum;i

++

)

{

//

poi为LocalResultPoi类型

var

poi

=

result.getPoi(i);

var

lng

=

poi.point.lng;

var

lat

=

poi.point.lat;

var

title

=

poi.title;

var

pt

=

new

BMap.Point(lng,lat);

var

marker

=

new

BMap.Marker(pt);

marker.setTitle(title);

marker.addEventListener(

"

click

"

,fnClick(marker));

map.addOverlay(marker);

}

}

});

ls.searchInBounds(s.value,map.getBounds());

}

//

为每个标注制定不同的回调函数

function

fnClick(marker)

{

return

function

()

{

curTitle

=

marker.getTitle();

var

html

=

"

从

"

+

curTitle

+

"

出发，坐<b>公交</b>到

"

+

"

<input id='txtDest' type='text' value='北京邮电大学' /><input type='button' value='查询' οnclick='tSearch()' />

"

;

var

infoWin

=

new

BMap.InfoWindow(html);

infoWin.addEventListener(

"

open

"

,

function

(){

//

给输入框添加焦点

document.getElementById(

"

txtDest

"

).focus();

});

marker.openInfoWindow(infoWin);

}

}

//

公交线路查询

function

tSearch()

{

//

请不要在查询的时候创建公交对象

if

(curTitle.length

>

0

)

{

var

dest

=

document.getElementById(

"

txtDest

"

).value;

ts.search(curTitle,dest);

}

}

</

script

>

</

html

>