上次講解的方法是:
在地圖中心點新增一個標註,每次拖動地圖就獲取地圖中心點,再把標註的位置設定為地圖中心點。可參考教程:http://www.cnblogs.com/milkmap/p/6126424.html
可能有開發者覺得,這個演算法會有“延時”,這次提供一個新的方法:
將一張標註圖片始終固定在地圖中央,不在地圖上新增標註。
使用CSS將一張標註樣子的圖片,固定在地圖中央。
<style> #mapBox{height:400px;width:600px;position:absolute;} #img_point{position:absolute;top:200px;left:300px;z-index:9999999;} </style>
建立地圖
//建立地圖 var map = new AMap.Map("mapBox", { resizeEnable: true, center: [116.397428, 39.90923], zoom:14 });
獲取並列印當前地圖中央的經緯度
//列印當前經緯度 function addCenterPoint(){ var centerPoint = map.getCenter(); $pointBox.innerHTML = "當前經緯度為:" + centerPoint.getLng() + ',' + centerPoint.getLat(); } addCenterPoint();
當地圖滑動時,列印當前地圖中央經緯度
//新增地圖事件 map.on('moveend', function() { addCenterPoint(); });
到這裡,就完成了拖動地圖,就可以列印地圖中心點。同時,保持了標註圖片一直在地圖中央顯示。
示例:http://zhaoziang.com/amap/deliver_address_point.htm
進階的做法:
您還可以把地址解析的功能加上,當輸入結構化地址時,如果地址解析成功,就重新設定地圖中心點。
function geocoder() { 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; var myLng = geocode[0].location.getLng(); var myLat = geocode[0].location.getLat(); resultStr += "當前座標</b>:" + myLng + ", " + myLat; $pointBox.innerHTML = resultStr; map.setCenter(new AMap.LngLat(myLng,myLat)); }
全部原始碼:
<!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;position:absolute;} #pointBox{height:20px;width:600px;} #img_point{position:absolute;top:200px;left:300px;z-index:9999999;} </style> <body> <div> <input id="addressBox" type="text" value="請輸入結構化地址,例如北京市朝陽區望京街道首開廣場" /> <input id="" type="button" onclick="geocoder();" value="搜尋" /> </div> <img id="img_point" src="marker64.png" /> <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 addCenterPoint(){ var centerPoint = map.getCenter(); $pointBox.innerHTML = "當前經緯度為:" + centerPoint.getLng() + ',' + centerPoint.getLat(); } addCenterPoint(); function geocoder() { 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; var myLng = geocode[0].location.getLng(); var myLat = geocode[0].location.getLat(); resultStr += "當前座標</b>:" + myLng + ", " + myLat; $pointBox.innerHTML = resultStr; map.setCenter(new AMap.LngLat(myLng,myLat)); } //新增地圖事件 map.on('moveend', function() { addCenterPoint(); }); </script> </body> </html>
示例:http://zhaoziang.com/amap/deliver_address_point.htm