利用百度地图API查询公交车线路位置信息以及鼠标取点的经纬度
先从官网申请秘钥/
2.
如果是用jsp写动态web项目，在jsp页面中引入js库，并且引入刚刚申请的api秘钥
<script type="text/javascript"src="http://api./api?v=2.0&ak=您的秘钥"></script>
界面设计
<body><p><img src="/img/logo-map.gif" /><spanstyle="display: inline-block; width: 200px;"> </span><inputtype="text" value="21" id="busId" />路公交 <input type="button"value="查询" onclick="busSearch();" /></p><div style="clear: both"> </div><divstyle="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./api?v=2.0&ak=您的秘钥"></script></head><body><p><img src="/img/logo-map.gif" /><spanstyle="display: inline-block; width: 200px;"> </span><inputtype="text" value="21" id="busId" />路公交 <input type="button"value="查询" onclick="busSearch();" /></p><div style="clear: both"> </div><divstyle="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>
