<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=4cb2435c46a93df6cca74737a1d5d269&plugin=AMap.Geocoder"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.10"></script>
<style>
.clearbox:after{
content: '';
clear: both;
display: block;
}
.subjectbody{
height: 600px;
width: 1000px;
}
.bodyfoot{
width: 200px;
height: 600px;
background: #ccc;
float: left;
}
#container{
float: left;
}
</style>
</head>
<body>
<div class="subjectbody clearbox">
<div class="bodyfoot">
<span>经纬度位置</span>
<ul class="grid">
<li></li>
<li></li>
</ul>
<span>具体位置</span>
<ul class="address">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="container" style="width: 800px; height:600px"></div>
</div>
<script>
window.onload= function () {
var longitude=document.querySelector('.grid').querySelector('li');
var laitude=document.querySelector('.grid').querySelectorAll('li')[1];
var addressArr=document.querySelector('.address').querySelectorAll('li');
var map = new AMap.Map('container',{
zoom: 10
});
//初始化操作
function loadmap(){
var itude=map.getCenter();
longitude.innerText='经度：'+itude.lng;
laitude.innerText='纬度：'+itude.lat;
console.log(itude);
}
loadmap();
map.getCity(function (data) {
addressArr[0].innerText='省份：'+data.province;
addressArr[1].innerText='地区：'+data.district;
addressArr[2].innerText='城市：'+data.city;
addressArr[3].innerText='城市编号：'+data.citycode;
});
map.setDefaultCursor('pointer');
//为地图注册click事件获取鼠标点击出的经纬度坐标
var clickEventListener = map.on('click', function(e) {
longitude.innerText='经度：'+e.lnglat.getLng();
laitude.innerText='纬度：'+e.lnglat.getLat();
var lnglatXY=[e.lnglat.getLng(),e.lnglat.getLat()];
geocoder(lnglatXY);
return lnglatXY;
});
var marker;
function geocoder(lnglatXY) {
var geocoder = new AMap.Geocoder({
radius: 1000, //范围，默认：500
extensions:'base'
});
//地理编码,返回地理编码结果
geocoder.getAddress(lnglatXY, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
console.log(result);
geocoder_CallBack(result);
}
});
if(marker){
map.remove(marker);
}
marker = new AMap.Marker({
map: map,
position:lnglatXY
});
map.setFitView();
}
//地理编码返回结果展示
function geocoder_CallBack(data) {
//地理编码结果数组
var geocode = data.regeocode.addressComponent;
addressArr[0].innerText='省份：'+geocode.province;
addressArr[1].innerText='地区：'+geocode.district;
addressArr[2].innerText='城市：'+geocode.city;
addressArr[3].innerText='城市编号：'+geocode.citycode;
}
}
</script>
</body>
</html>
