前面貌似写过关于地图中心点绘制矩形的文章
下面直接贴代码就是组装高德的两个demo变成一个我想应该对于大多数还是挺有用的吧
<!doctype html> <html lang="zh-CN"> <head> <!-- 原始地址://webapi.amap.com/ui/1.0/ui/misc/PositionPicker/examples/positionPicker.html --> <base href="//webapi.amap.com/ui/1.0/ui/misc/PositionPicker/examples/" /> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>拖拽选址</title> <style> html, body { height: 100%; margin: 0; width: 100%; padding: 0; overflow: hidden; font-size: 13px; } #container{height:500px; width: 500px; margin: 0 auto;} #tip { background-color: #fff; padding-left: 10px; padding-right: 10px; position: absolute; font-size: 12px; right: 10px; top: 20px; border-radius: 3px; border: 1px solid #ccc; line-height: 30px; } </style> </head> <body> <div id="container" class="map" tabindex="0"></div> <div id='tip'> <!-- <div> <div class='title'>选址结果</div> <div class='c'>经纬度:</div> <div id='lnglat'></div> <div class='c'>地址:</div> <div id='address'></div> <div class='c'>最近的路口:</div> <div id='nearestJunction'></div> <div class='c'>最近的路:</div> <div id='nearestRoad'></div> <div class='c'>最近的POI:</div> <div id='nearestPOI'></div> </div>--> </div> <input type="hidden" id="userlocaltionid"> <input type="hidden" id="userlocaltiontext"> <input type="hidden" id="addresscode"> <script type="text/javascript" src='//webapi.amap.com/maps?v=1.3&key={$geokey}&plugin=AMap.ToolBar'></script> <!-- UI组件库 1.0 --> <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.10"></script> <script type="text/javascript"> AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) { var map, geolocation; var map = new AMap.Map('container', { zoom:14, scrollWheel: false }); /* AMap.plugin('AMap.ToolBar',function(){ var toolbar = new AMap.ToolBar(); map.addControl(toolbar) })*/ AMap.plugin('AMap.Geolocation', function () { geolocation = new AMap.Geolocation({ enableHighAccuracy: true,//是否使用高精度定位,默认:true timeout: 10000, //超过10秒后停止定位,默认:无穷大 maximumAge: 0, //定位结果缓存0毫秒,默认:0 convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:true showButton: true, //显示定位按钮,默认:true buttonPosition: 'LB', //定位按钮停靠位置,默认:'LB',左下角 buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20) showMarker: true, //定位成功后在定位到的位置显示点标记,默认:true showCircle: true, //定位成功后用圆圈表示定位精度范围,默认:true panToLocation: true, //定位成功后将定位到的位置作为地图中心点,默认:true zoomToAccuracy:true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false }); map.addControl(geolocation); geolocation.getCurrentPosition(); //AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息 // AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息 }); var positionPicker = new PositionPicker({ mode: 'dragMap', map: map }); positionPicker.on('success', function(positionResult) { document.getElementById('userlocaltionid').value=positionResult.position.lng+','+positionResult.position.lat; document.getElementById('userlocaltiontext').value=positionResult.regeocode.addressComponent.province+positionResult.regeocode.addressComponent.city+positionResult.regeocode.addressComponent.district+positionResult.regeocode.addressComponent.street+positionResult.regeocode.addressComponent.township+positionResult.regeocode.addressComponent.streetNumber; document.getElementById('addresscode').value=positionResult.regeocode.addressComponent.adcode; var str=['定位成功']; str.push('地址:' + positionResult.regeocode.addressComponent.province+positionResult.regeocode.addressComponent.city+positionResult.regeocode.addressComponent.district+positionResult.regeocode.addressComponent.street+positionResult.regeocode.addressComponent.township+positionResult.regeocode.addressComponent.streetNumber); str.push('经度:' + positionResult.position.lng); str.push('纬度:' + positionResult.position.lat); str.push('邮编:' + positionResult.regeocode.addressComponent.adcode); // str.push('是否经过偏移:' + (data.isConverted ? '是' : '否')); document.getElementById('tip').innerHTML =/* '<input type="text" id="searchgeo" /><button οnclick="geocoder()">搜索</button><br/>'+*/str.join('<br>'); /*document.getElementById('lnglat').innerHTML = positionResult.position; document.getElementById('address').innerHTML = positionResult.address; document.getElementById('nearestJunction').innerHTML = positionResult.nearestJunction; document.getElementById('nearestRoad').innerHTML = positionResult.nearestRoad; document.getElementById('nearestPOI').innerHTML = positionResult.nearestPOI;*/ }); positionPicker.on('fail', function(positionResult) { document.getElementById('userlocaltionid').value = ' '; document.getElementById('userlocaltiontext').value = ' '; document.getElementById('addresscode').value = ' '; document.getElementById('tip').innerHTML = ' '; }); var onModeChange = function(e) { positionPicker.setMode(e.target.value) } /*var startButton = document.getElementById('start'); var stopButton = document.getElementById('stop'); var dragMapMode = document.getElementsByName('mode')[0]; var dragMarkerMode = document.getElementsByName('mode')[1]; AMap.event.addDomListener(startButton, 'click', function() { positionPicker.start(map.getBounds().getSouthWest()) }) AMap.event.addDomListener(stopButton, 'click', function() { positionPicker.stop(); }) AMap.event.addDomListener(dragMapMode, 'change', onModeChange) AMap.event.addDomListener(dragMarkerMode, 'change', onModeChange);*/ positionPicker.start(); map.panBy(0, 1); map.addControl(new AMap.ToolBar({ liteStyle: true })) }); </script> </body> </html>
在里面有一个url上面是高德对应的keys替换一下就好
{$geokey}
就是这个替换成你的key