html高德地圖ip定位之後拖動自定義定位地址
阿新 • • 發佈：2018-11-29
前面貌似寫過關於地圖中心點繪製矩形的文章
下面直接貼程式碼就是組裝高德的兩個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/" /> <metacharset="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 onclick="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