高德api
页面加载完成/提示框选中/点击地图根据经纬度 获取并设置地址
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>小区显示地图</title>
<%@ include file="/WEB-INF/jsp/common/public.jsp"%>
<%-- <link rel="stylesheet" type="text/css" href="${s}/css/map.css" /> --%>
<meta name="keywords" content="H-ui.admin v3.0,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
<meta name="description" content="H-ui.admin v3.0,是一款由国人开发的轻量级扁平化网站后台模板,完全免费开源的网站后台管理系统模版,适合中小型CMS后台系统。">
<link rel="stylesheet" type="text/css" href="${s}/css/AMap.css" />
</head>
<body>
<div id="container"></div>
<div id="myPageTop">
<table>
<tr>
<td>
<label>按关键字搜索:</label>
</td>
</tr>
<tr>
<td>
<input type="text" placeholder="请输入关键字进行搜索" value='${community.communityName }' id="tipinput" class="input-text" />
</td>
</tr>
<tr>
<td>
<label>左击获取地址信息:</label>
</td>
</tr>
<tr>
<td>
<!-- <input type="text" id="input" disabled="disabled" /> -->
<span id="addr"></span>
</td>
</tr>
</table>
</div>
<script type="text/javascript" src="${s}/js/AMap/addToolbar.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.2&key=key"></script>
<script type="text/javascript">
var x ='${empty x?community.addrLatitude : x }',y='${empty y ?community.addrLongitude :y }';
var cName = '${cName}';
var map = new AMap.Map("container", {
resizeEnable: true,
zoom: 15
});
AMap.plugin(['AMap.Autocomplete','AMap.Geocoder'],function(){
if('0E-7' != x && '0E-7' != y)
{
map.setCenter([y,x]);
}
else{
map.setCity(cName);
}
//为地图注册click事件获取鼠标点击出的经纬度坐标
var clickEventListener = map.on('click', function(e) {
marker.setPosition(e.lnglat);
loadAddr(e.lnglat);
// 经纬度
// document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
});
var completeEventListener = map.on('complete', function() {
if('0E-7' != x && '0E-7' != y)
{
loadAddr(map.vh.center);
}
});
// 根据经纬度获取地址
function loadAddr(location){
console.log(location);
geocoder.getAddress(location,function(status,result){
if(status=='complete'){
document.getElementById('addr').innerHTML = result.regeocode.formattedAddress
}
})
parent.y = location.getLng();
parent.x = location.getLat()
parent.document.getElementById("position").innerHTML=parent.x+','+parent.y+'(已设置)';
console.log(parent.document.getElementById("position").innerHTML);
}
// 地图标点
var marker = new AMap.Marker({
map:map,
bubble:true
})
//地理编码与逆地理编码服务,提供地址与坐标间的相互转换
var geocoder = new AMap.Geocoder({
city: '010'//城市,默认:“全国”
});
var auto = new AMap.Autocomplete({
input: "tipinput",
city: cName
});
AMap.event.addListener(auto, "select", select);//注册监听,当选中某条记录时会触发
function select(e) {
if (e.poi && e.poi.location) {
map.setZoom(15);
map.setCenter(e.poi.location);
marker.setPosition(e.poi.location);
loadAddr(e.poi.location);
}
}
});
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>