您的位置：首页 > 其它
WEB页面接入百度地图，实现点击地图获取坐标和地址的功能

2018-01-18 14:38 981 查看
<%@ page language="java" pageEncoding="UTF-8" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
#allmap{width:100%;height:88%;}
</style>
<script type="text/javascript" src="${ctx}/js/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=${baidukey}"></script>
<script type="text/javascript"
src="${ctx}/static/bootstrap/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="${staticDomain}/static/lib/bootstrap/3.3.5/css/bootstrap.min.css"/>
</head>
<body>
<br/>
<table>
<tr>
<td>
<input style="width:400px;" type="text" class="form-control" placeholder="请输入需要检索的地址" name="address" id="address" onkeyup="searchAddress();" value="${address}"/>
<input type="hidden" id="addressLonglat" name="addressLonglat" value="${longlat}"/>
</td>
<td style="width: 10px;">

</td>
<td>
<button type="button" class="btn btn-success btn-s-xs" onclick="setAddress();">设为公司地址
</button>
</td>
</tr>

</table>
<div id="allmap"></div>
</body>
<script type="text/javascript">
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map}
});
function searchAddress() {
var address = $("#address").val();
if (address != '' && address != null && typeof(address) != "undefined") {
local.search(address);
}
}
//根据IP定位到城市
function myFun(result){
var longlat = '${longlat}';
if (longlat != '' && longlat != null && typeof(longlat) != "undefined") {
map.centerAndZoom(new BMap.Point(longlat.split(",")[0], longlat.split(",")[1]), 18);
var marker = new BMap.Marker(new BMap.Point(longlat.split(",")[0], longlat.split(",")[1]));
map.addOverlay(marker);
}else {
var cityName = result.name;
map.setCenter(cityName);
}
}
var myCity = new BMap.LocalCity();
myCity.get(myFun);
var geoc = new BMap.Geocoder();
map.addEventListener("click", function(e){
//清楚地图上的marker
map.clearOverlays();
//通过点击百度地图，可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度
var pt = e.point;
var marker = new BMap.Marker(new BMap.Point(pt.lng, pt.lat));
map.addOverlay(marker);
geoc.getLocation(pt, function(rs){
//addressComponents对象可以获取到详细的地址信息
var addComp = rs.addressComponents;
var site = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
$("#address").val(site);
map.centerAndZoom(new BMap.Point(pt.lng, pt.lat), 18);
//将对应的HTML元素设置值
$("#addressLonglat").val(pt.lng+","+pt.lat);
});
});
//关闭遮罩层，返回地址信息给父页面
function setAddress(){
parent.$("#address").val($("#address").val());
parent.$("#addressLonglat").val($("#addressLonglat").val());
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
}
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航