html源碼：

?<div?id="my_container"></div>

js源碼：

export?default?{name:?"company_manage",data()?{return?{ruleForm:?{addr:?"",long:?"",lat:?"",}};},mounted:?function()?{this.init();},methods:?{init()?{var?map?=?new?AMap.Map("my_container",?{resizeEnable:?true,zoom:?10});AMap.plugin("AMap.Geolocation",?function()?{//異步加載插件var?geolocation?=?new?AMap.Geolocation();map.addControl(geolocation);});var?geocoder,?marker;function?regeocoder(lnglatXY,?that)?{AMap.plugin("AMap.Geocoder",?function()?{var?geocoder?=?new?AMap.Geocoder({radius:?1000,extensions:?"all"});geocoder.getAddress(lnglatXY,?function(status,?result)?{if?(status?===?"complete"?&&?result.info?===?"OK")?{var?address?=?result.regeocode.formattedAddress;that.ruleForm.addr?=?address;}});if?(!marker)?{marker?=?new?AMap.Marker();map.add(marker);}marker.setPosition(lnglatXY);});}var?that?=?this;//點擊事件map.on("click",?function(e)?{var?lnglatXY?=?[e.lnglat.getLng(),?e.lnglat.getLat()];regeocoder(lnglatXY,?that);that.ruleForm.long?=?e.lnglat.getLng();that.ruleForm.lat?=?e.lnglat.getLat();//?獲取經緯度console.log(lnglatXY);//?根據經緯度獲取詳細地址$.ajax({url:"http://restapi.amap.com/v3/geocode/regeo?key=你的key&location="?+lnglatXY[0]?+","?+lnglatXY[1]?+"&poitype=&radius=1000&extensions=all&batch=false&roadlevel=0",method:?"get"}).done(function(msg)?{//注意獲取過來就是一個對象var?addressName?=?msg.regeocode.formatted_address;console.log(addressName);});});}}};

總結

以上是生活随笔為你收集整理的vue+高德地图 点击地图获取经纬度和详细地址的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。