<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>经纬度坐标与地理像素坐标相互转换</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<div class="button-group" style="background-color: white">
<div>
地图经纬度坐标：(<b>鼠标左键在地图上单击获取经纬度坐标</b>)<br>
lng：<input type="text" id="lngX"/>
lat：<input type="text" id="latY"/><br>
地图地理像素坐标：<br>
X： <input type="text" id="pixelx"/>
Y： <input type="text" id="pixely"/>
</div>
<div style="margin-top:5px">
<input id="lng2pixel" type="button" class="button" value="经纬度转地理像素坐标"/>
<input id="pixel2lng" type="button" class="button" value="地理像素坐标转经纬度"/>
</div>
</div>
<script>
var map = new AMap.Map('container', {
resizeEnable: true
});
var $= function(elementId){
return document.getElementById(elementId);
}
var lngX = $('lngX'),latY = $('latY');
var pixelX = $('pixelx'),pixelY = $('pixely');
map.on('click', getLnglat);
function getLnglat(e) {
lngX.value = e.lnglat.getLng();
latY.value = e.lnglat.getLat();
}
AMap.event.addDomListener($('lng2pixel'), 'click', function() {
var px = lngX.value,py = latY.value;
var pixel = map.lnglatToPixel([px, py], 10);
pixelX.value = pixel.getX();
pixelY.value = pixel.getY();
});
AMap.event.addDomListener($('pixel2lng'), 'click', function() {
var lnglatX = parseInt(pixelX.value),lnglatY = parseInt(pixelY.value);
var ll = map.pixelToLngLat(new AMap.Pixel(lnglatX, lnglatY), 10);
lngX.value = ll.getLng();
latY.value = ll.getLat();
});
</script>
</body>
</html>
