百度地图标注
程序员文章站
2022-06-10 18:08:48
...
1 在添加页面中添加地图点击事件
<tr>
<td class="active" style="width:4%">
<label class="pull-right">
<font color="red">*</font>大厅位置
</label>
</td>
<td colspan="3">
<input type="hidden" name="lat" id="lat" class="form-control input-250">
<input type="hidden" name="lng" id="lng" class="form-control">
<input type="text" id="position" name="position" class="form-control"
style="width: 80%;display: inline-block">
<a id="mapButton" class="btn btn-primary" href="javascript:">
<i class="fa fa-map-pin fa-btn"></i>【地图标注】</a>
</td>
</tr>
得到id mapButton
// 地图标
$("#mapButton").click(function () {
top.layer.open({
type: 2,
area: ['1000px', '600px'],
title: "打开地图",
maxmin: true, //开启最大化最小化按钮
content: "${basePath}/center/centerSetting/map",
btn: ['确定', '关闭'],
yes: function (index, layero) {
var lat = layero.find("iframe")[0].contentWindow.lat;
var lng = layero.find("iframe")[0].contentWindow.lng;
var address = layero.find("iframe")[0].contentWindow.address;
$("#position").val(address);
$("#lng").val(lng);
$("#lat").val(lat);
top.layer.close(index);
},
cancel: function (index) {
top.layer.close(index);
}
});
});
Controller中的center/centerSetting/map
/**
* 请求转发到map页面
* @return
*/
@RequiresPermissions("center:centerSetting:map")
@GetMapping("center/centerSetting/map")
public String selectMap(String lng,String lat) {
return "center/centerSetting/map";
}
map.ftl页面
<#assign basePath=request.contextPath />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta id="viewport" name="viewport"
content="width = device-width; initial-scale=1.0;maximum-scale=1.0; user-scalable=0;"/>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="telephone=no" name="format-detection"/>
<title>地图标注</title>
<script type="text/javascript">
window.addEventListener("load", function () {
setTimeout(function () {
window.scrollTo(0, 1);
}, 0);
});
</script>
<script type="text/javascript" src="http://api.map.baidu.com/api?ak=nfPeVUXFF4FUsex4gVfrIG5b&v=2.0"></script>
<script type="text/javascript" src="${basePath}/plugins/jquery/jquery-2.1.4.min.js"></script>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
min-height: 100%;
height: 100%;
}
#shMap {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#submit {
width: 200px;
height: 40px;
line-height: 40px;
font-size: 16px;
border: 1px solid #d2d2d2;
background: #FFF;
position: absolute;
left: 0;
bottom: 20px;
}
#bgzz {
DISPLAY: block;
Z-index: 9999;
background: #222222;
left: 0px;
width: 100%;
height: 30px;
position: fixed;
top: 0px;
opacity: 0.8;
text-align: center;
padding-top: 5px;
color: #ffffff;
}
#btn {
background: rgba(0, 0, 0, 0) -moz-linear-gradient(90deg, #4787ed, #4d90fe) repeat scroll 0 0;
background-color: #2e8ded;
border-color: #3079ed;
color: #fff;
border: 1px solid;
border-radius: 2px;
cursor: pointer;
font-family: "Microsoft yahei", Arial;
font-size: 12px;
height: 24px;
line-height: 24px;
margin-bottom: 10px;
padding: 0 12px;
}
</style>
</head>
<body>
<div id="bgzz">
输入地址：<input type="text" id="addr" value="${address!}" size="30"/>
<input type="button" id="btn" value="确定" onclick="getXy()"/>
<span style="color: #f00">注意：这里输入详细地址</span>
</div>
<div id="shMap"></div>
<input type="hidden" name="lng" id="lng" value="${lng1!}"/>
<input type="hidden" name="lat" id="lat" value="${lat!}"/>
<script type="text/javascript">
var lcp_marker;
function myResize() {
var lcp_w = document.documentElement.clientWidth;
var lcp_h = document.documentElement.clientHeight;
var P = document.getElementById("shMap");
if (lcp_w == 0 && lcp_h == 0) {
lcp_w = document.body.clientWidth;
lcp_h = document.body.clientHeight;
}
P.style.width = lcp_w + "px";
P.style.height = lcp_h + "px";
}
myResize();
window.onresize = function () {
myResize();
}
var map = new BMap.Map("shMap", {enableMapClick: false});
/*map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP,BMAP_HYBRID_MAP]}));
map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT}));
*/
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
map.setCurrentCity("北京");
var lng = "${lng!}";
var lat = "${lat!}";
if (lat == "" || lng == "") {
map.centerAndZoom(new BMap.Point(115.03, 24.78), 12);
} else {
map.centerAndZoom(new BMap.Point(lng, lat), 16);
}
map.enableScrollWheelZoom(true);
map.enableDragging();
(function () {
var a = document.getElementById("lat").value, b = document.getElementById("lng").value;
if (a != "" && b != "") {
lcp_marker = new BMap.Marker(new BMap.Point(b, a));
lcp_marker.setTitle("当前标注点");
lcp_marker.enableDragging();
map.addOverlay(lcp_marker);
}
})()
var lat;
var lng;
var address;
var geoc = new BMap.Geocoder();
map.addEventListener("click", function (e) {
map.clearOverlays;
var point = new BMap.Point(e.point.lng, e.point.lat);
lat = e.point.lat;
lng = e.point.lng;
geoc.getLocation(e.point, function (rs) {
//addressComponents对象可以获取到详细的地址信息
var addComp = rs.addressComponents;
var site = addComp.province + "" + addComp.city + "" + addComp.district + "" + addComp.street + ""
+ addComp.streetNumber;
//将对应的HTML元素设置值
console.log(site)
address = site;
});
if (!lcp_marker) {
lcp_marker = new BMap.Marker(point);
lcp_marker.setTitle("当前标注点");
lcp_marker.enableDragging();
map.addOverlay(lcp_marker);
document.getElementById("lat").value = e.point.lat;
document.getElementById("lng").value = e.point.lng;
// $(window.parent.document).find("#latt").val(e.point.lat);
// $(window.parent.document).find("#lngg").val(e.point.lng);
} else {
lcp_marker.setPosition(point);
document.getElementById("lat").value = e.point.lat;
document.getElementById("lng").value = e.point.lng;
// $(window.parent.document).find("#latt").val(e.point.lat);
// $(window.parent.document).find("#lngg").val(e.point.lng);
}
})
function getXy() {
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
var addr = document.getElementById("addr").value;
if (addr != "") {
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint(addr, function (point) {
if (point) {
map.centerAndZoom(point, 16);
//map.addOverlay(new BMap.Marker(point));
//alert(point.lat+","+point.lng)
document.getElementById("lat").value = point.lat;
document.getElementById("lng").value = point.lng;
lat = point.lat;
lng = point.lng;
} else {
alert("您选择地址没有解析到结果!");
}
}, "赣州市");
}
}
</script>
</body>
</html>