用戶需求：管理者需要錄入一批商戶，並在地圖上把商戶展示出來。但發現一些商戶的地址描述並不清楚，導致商戶位置出錯。如何獲得更加准確的商戶位置呢？
分析：假設地址准確的，可以通過地址解析，得到准確的經緯度。假設地址缺失，我們通過人工打點的辦法，獲取精准的位置。可以參考淘寶的收貨地址，如下圖。
------------------------------------------------------------------------------------------------------
重點功能
功能一、地址解析
方法：AMap.Geocoder
說明：地理編碼與逆地理編碼服務，用於地址描述與坐標間的相互轉換
方法：getLocation
說明：根據給定的地址描述進行解析
當地址解析成功時，執行回調函數，將該地址對應的經緯度顯示出來，並在該點打個標注
當地址解析失敗時，告訴用戶“查無此地址”
地址解析代碼如下：
function geocoder() { map.clearMap(); var myGeo = new AMap.Geocoder(); //地理編碼,返回地理編碼結果
myGeo.getLocation($addressBox.value, function(status, result) { if (status === 'complete' && result.info === 'OK') { //地址解析成功
geocoder_CallBack(result); } else{ //地址解析失敗
$pointBox.innerHTML = "查無此地址"; } }); }
回調函數如下：
//地理編碼返回結果展示
function geocoder_CallBack(data) { var resultStr = ""; var geocode = data.geocodes; addMarker(geocode[0].location); resultStr += "當前坐標</b>：" + geocode[0].location.getLng() + ", " + geocode[0].location.getLat(); map.setFitView(); $pointBox.innerHTML = resultStr; }
功能二、拖拽地圖，獲取經緯度
給map添加地圖事件，當事件觸發時，在地圖中心打點
AMap.Map 構造一個地圖對象
moveend 地圖移動結束后觸發，包括平移和縮放。如地圖有拖拽緩動效果，則在緩動結束后觸發
地圖事件：
map.on('moveend', function() { addCenterPoint(); });
在地圖中心打點：
//地圖中心點添加標注
function addCenterPoint(){ map.clearMap(); var centerPoint = map.getCenter(); addMarker(centerPoint); $pointBox.innerHTML = "當前經緯度為：" + centerPoint.getLng() + ',' + centerPoint.getLat(); } addCenterPoint();
其他功能
1.顯示地圖
//創建地圖
var map = new AMap.Map("mapBox", { resizeEnable: true, center: [116.397428, 39.90923], zoom:14 });
2.展示標注
//添加標注
function addMarker(point) { var marker = new AMap.Marker({ map: map, position: [ point.getLng(), point.getLat()] }); }
------------------------------------------------------------------------------------------------------
截圖：
示例查看：http://zhaoziang.com/amap/deliver_address.htm
全部源代碼：
<!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>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=0250860ccb5953fa5d655e8acf40ebb7&plugin=AMap.Geocoder"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<style>
#addressBox{height:20px;width:600px;}
#mapBox{height:400px;width:600px}
#pointBox{height:20px;width:600px;}
</style>
<body>
<div>
<input id="addressBox" type="text" value="請輸入結構化地址，例如北京市朝陽區望京街道首開廣場" />
<input id="" type="button" onclick="geocoder();" value="搜索" />
</div>
<div id='pointBox'> </div>
<div id='mapBox'></div>
<div>
使用方法：<br />
1.輸入地址，點擊搜索<br />
2.如果不夠准確，可以拖動地圖改變經緯度
</div>
<script type="text/javascript">
var $addressBox = document.getElementById('addressBox');
var $pointBox = document.getElementById("pointBox");
//創建地圖
var map = new AMap.Map("mapBox", {
resizeEnable: true,
center: [116.397428, 39.90923],
zoom:14
});
//添加標注
function addMarker(point) {
var marker = new AMap.Marker({
map: map,
position: [ point.getLng(), point.getLat()]
});
}
//地圖中心點添加標注
function addCenterPoint(){
map.clearMap();
var centerPoint = map.getCenter();
addMarker(centerPoint);
$pointBox.innerHTML = "當前經緯度為：" + centerPoint.getLng() + ',' + centerPoint.getLat();
}
addCenterPoint();
function geocoder() {
map.clearMap();
var myGeo = new AMap.Geocoder();
//地理編碼,返回地理編碼結果
myGeo.getLocation($addressBox.value, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
//地址解析成功
geocoder_CallBack(result);
}
else{
//地址解析失敗
$pointBox.innerHTML = "查無此地址";
}
});
}
//地理編碼返回結果展示
function geocoder_CallBack(data) {
var resultStr = "";
var geocode = data.geocodes;
addMarker(geocode[0].location);
resultStr += "當前坐標</b>：" + geocode[0].location.getLng() + ", " + geocode[0].location.getLat();
map.setFitView();
$pointBox.innerHTML = resultStr;
}
map.on('moveend', function() {
addCenterPoint();
});
</script>
</body>
</html>