JSP界面引用百度地图获取坐标

时间:2024-09-25 18:06:14

需求:

需要在JSP界面上引用百度地图,文本框中输入地址之后,自动拿到在百度地图上的经纬度

解决步骤:

1、引入百度地图api:

head中进行引用<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>

1.3以上版本需要key,有点麻烦

2、html body内部定义容器来放置地图:

<div id="container" style="position:absolute;margin-top:30px;width:400px;height:400px;overflow:hidden;"></div>

3、定义触发来源:

假设有个文本框,输入字段之后,文本框失去焦点则进行查询

<input type="text" name="washaddress" id="washaddress" onblur="search()">

4、初始化地图:

在</html>标签之前定义,保证能找到要显示的容器:

var map=new BMap.Map("container");

map.centerAndZoom("上海",12);//定义默认显示中心区域和显示比例

map.enableScrollWheelZoom();//打开滚轮缩放功能

map.enableContinuousZoom();//打开拖动功能

var localsearch=new BMap.LocalSearch(map);//定义本地搜索变量

localsearch.enableAutoViewport();

5、定义搜索方法:

function search(){

map.clearOverlays();//清除之前地图的标记

var keyword=document.getElementById("washaddress").value;//拿到搜索关键字

localsearch.setSearchCompleteCallback(function (searchresult){//定义搜索完成回调方法

var poi=searchresult.getPoi(0);//拿到搜索结果的点,备注:当前只获取了搜索的第一个,其实搜索结果有很多个,这里忽略处理!

document.getElementById("longitude").value = poi.point.lng;//拿到点的经度
document.getElementById("latitude").value = poi.point.lat;//拿到点的纬度

map.centerAndZoom(poi.point, 13);//将地图中心显示为搜索的店

var marker = new BMap.Marker(new BMap.Point(poi.point.lng,poi.point.lat));//制作新的地图标记
map.addOverlay(marker);//显示标记

});

localsearch.search(keyword);//search进行检索

}

完成需求,成功根据text中的内容拿到坐标