利用百度地图API查询公交车线路位置信息以及鼠标取点的经纬度
先从官网申请秘钥http://lbsyun.baidu.com/
2.
如果是用jsp写动态web项目，在jsp页面中引入js库，并且引入刚刚申请的api秘钥
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=您的秘钥"></script>
界面设计
<body>
<p>
<img src="http://map.baidu.com/img/logo-map.gif" /><span
style="display: inline-block; width: 200px;"> </span><input
type="text" value="21" id="busId" />路公交 <input type="button"
value="查询" onclick="busSearch();" />
</p>
<div style="clear: both"> </div>
<div
style="float: left; width: 600px; height: 500px; border: 1px solid gray"
id="container"></div>
<div id="results"
style="float: left; width: 300px; height: 500px; font-size: 13px;"></div>
</body>
添加鼠标滚轮缩放地图效果
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件
var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL});
map.addControl(top_left_control);
map.addControl(top_left_navigation);
map.addControl(top_right_navigation);
加入鼠标取点得经纬度
map.addEventListener("click",function(e){
alert(e.point.lng + "," + e.point.lat);
});
这个功能不需要与后台进行交互，百度地图封装好的，浏览器界面的每一个请求是第三方直接完成的，只需要把代码粘到jspfile或者js中然后将整个项目部署到Tomcat服务器上，电脑接入网，就可以在浏览器上运行。
运行结果图
公交查询
拾取经纬度
整个前端界面代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度地图站点查询</title>
</head>
<body>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>搜索21路公交</title>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=您的秘钥"></script>
</head>
<body>
<p>
<img src="http://map.baidu.com/img/logo-map.gif" /><span
style="display: inline-block; width: 200px;"> </span><input
type="text" value="21" id="busId" />路公交 <input type="button"
value="查询" onclick="busSearch();" />
</p>
<div style="clear: both"> </div>
<div
style="float: left; width: 600px; height: 500px; border: 1px solid gray"
id="container"></div>
<div id="results"
style="float: left; width: 300px; height: 500px; font-size: 13px;"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(108.93,34.27), 13);
map.enableScrollWheelZoom();
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件
var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL});
map.addControl(top_left_control);
map.addControl(top_left_navigation);
map.addControl(top_right_navigation);
//单击获取点击的经纬度
map.addEventListener("click",function(e){
alert(e.point.lng + "," + e.point.lat);
});
var busline = new BMap.BusLineSearch(map,{
renderOptions:{map:map,panel:"results"},
onGetBusListComplete: function(result){
if(result) {
var fstLine = result.getBusListItem(0);//获取第一个公交列表显示到map上
busline.getBusLine(fstLine);
}
}
});
function busSearch(){
var busName = document.getElementById("busId").value;
busline.getBusList(busName);
}
</script>
