上次讲解的方法是:
在地图中心点添加一个标注,每次拖动地图就获取地图中心点,再把标注的位置设置为地图中心点。可参考教程: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