<!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>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></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 id="tip">
<span id="result"></span>
</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 geocoder() {
var geocoder = new AMap.Geocoder({
city: "0512", //城市，默认：“全国”
radius: 1000 //范围，默认：500
});
//地理编码,返回地理编码结果
geocoder.getLocation("高新区", function(status, result) {
if (status === 'complete' && result.info === 'OK') {
geocoder_CallBack(result);
}
});
}
geocoder();
function addMarker(i, d) {
var marker = new AMap.Marker({
map: map,
position: [ d.location.getLng(), d.location.getLat()]
});
var infoWindow = new AMap.InfoWindow({
content: d.formattedAddress,
offset: {x: 0, y: -30}
});
marker.on("mouseover", function(e) {
infoWindow.open(map, marker.getPosition());
});
}
//地理编码返回结果展示
function geocoder_CallBack(data) {
var resultStr = "";
//地理编码结果数组
var geocode = data.geocodes;
for (var i = 0; i < geocode.length; i++) {
//拼接输出html
resultStr += "<span style=\"font-size: 12px;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\">" + "<b>地址</b>：" + geocode[i].formattedAddress + "" + " <b>的地理编码结果是:</b><b> 坐标</b>：" + geocode[i].location.getLng() + ", " + geocode[i].location.getLat() + "" + "<b> 匹配级别</b>：" + geocode[i].level + "</span>";
addMarker(i, geocode[i]);
}
map.setFitView();
document.getElementById("result").innerHTML = resultStr;
}
}
</script>
</body>
</html>
