百度地图 公交查询功能
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
<title>22.1公交查询功能</title>
</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 style="clear: both;">
<div style="float: left; width: 500px; height: 340px; border: 1px solid gray" id="container">
</div>
<div id="divResult" style="float: left; width: 500px; height: 340px; background: #eee">
</div>
</div>
</div>
</div>
</body>
</html>
<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,
autoViewport: true,
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) {
var curNum = result.getCurrentNumPois();
for (var i = 0; i < curNum; i++) {
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='查询' onclick='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>
