html
<form class="modal fade" id="myModal" tabindex="-1" role="dialog" >
<div style="width:680px;height:700px;"><div class="modal-content" style="height:700px;">
<div class="modal-header" style="height:50px;">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">百度地图</h4>
</div>
<div class="modal-body" style="height:550px;">
<div class="col-sm-9">
<input type="text" id="mapCity" name="city" class="col-xs-10 col-sm-2" placeholder="城市名" />
<input type="text" id="mapAdress" name="mapAdress" class="col-xs-10 col-sm-5" placeholder="地点" value="${entity.f_address!}"/>
<input type ="button" id="search" value="搜索" style="width: 50px;height:30px;" />
</div>
<div class="space-4"></div>
<div class="col-sm-9">
</div>
<div class="form-group" >
<div class="col-sm-9">
<div id="baiduMap" style="width:600px;height:500px;">
</div>
<span id="mapAddress"></span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
<!-- /.modal -->
</form>
js
var map = new BMap.Map("baiduMap");
map.centerAndZoom(new BMap.Point(121.446102,31.283787), 11);
map.enableScrollWheelZoom();
var geoc = new BMap.Geocoder();
//获取选中地点的经纬度
var marker;
var point ;
//鼠标事件
map.addEventListener("click", function(e){
point =e.point;
addMarker(point);
});
// 返回地址 和经纬度
function addMarker(point,resetView) {
if(resetView){
map.centerAndZoom(point,15);
}
//获得选中的点,标记他
if(marker)
map.removeOverlay(marker);
marker = new BMap.Marker(point)
map.addOverlay(marker);
//清除搜索记录
geoc.getLocation(point, function(rs){
var addComp = rs.addressComponents;
//打开信息窗口
$("#latitude").val(point.lat);
$("#longitude").val(point.lng);
if($("#storeAddress").val()==null ||$("#storeAddress").val()==""){
$("#storeAddress").val(addComp.city+addComp.district+addComp.street+addComp.streetNumber)
}
$("#mapAddress").html( addComp.city + addComp.district + addComp.street + addComp.streetNumber);
});
}
$("#search").click(function (){
//$("txtResult").value=""//每次生成前清空文本域
map.clearOverlays(); //清除地图上所有标记
var city = $("#mapCity").val();
var address = $("#mapAdress").val();
if(city==null || city==""){
alert("请输入城市名称");
return;
}
if(address==null || address==""){
alert("请输入地点");
return;
}
var local = new BMap.LocalSearch(city,{
renderOptions:{
map: map,
panel: "results",//结果容器id
autoViewport: true, //自动结果标注
selectFirstResult: true, //指定到第一个目标
enableRouteSearchBox: true,
enableRouteInfo:true
},
pageCapacity: 1
});
// 获取搜索点数据
local.setSearchCompleteCallback(function (searchResult) {
var poi = searchResult.getPoi(0);
addMarker(poi.point,true);
});
local.search(address);
});
参考百度API http://lbsyun.baidu.com/index.php?title=jspopular