【地图API】收货地址详解2
上次讲解的方法是：
在地图中心点添加一个标注，每次拖动地图就获取地图中心点，再把标注的位置设置为地图中心点。可参考教程：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
