1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue+高德地图 点击地图获取经纬度和详细地址

vue+高德地图 点击地图获取经纬度和详细地址

时间:2023-05-25 20:21:01

相关推荐

vue+高德地图 点击地图获取经纬度和详细地址

html源码:

<divid="my_container"></div>

js源码:

exportdefault{name:"company_manage",data(){return{ruleForm:{addr:"",long:"",lat:"",}};},mounted:function(){this.init();},methods:{init(){varmap=newAMap.Map("my_container",{resizeEnable:true,zoom:10});AMap.plugin("AMap.Geolocation",function(){//异步加载插件vargeolocation=newAMap.Geolocation();map.addControl(geolocation);});vargeocoder,marker;functionregeocoder(lnglatXY,that){AMap.plugin("AMap.Geocoder",function(){vargeocoder=newAMap.Geocoder({radius:1000,extensions:"all"});geocoder.getAddress(lnglatXY,function(status,result){if(status==="complete"&&result.info==="OK"){varaddress=result.regeocode.formattedAddress;that.ruleForm.addr=address;}});if(!marker){marker=newAMap.Marker();map.add(marker);}marker.setPosition(lnglatXY);});}varthat=this;//点击事件map.on("click",function(e){varlnglatXY=[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:"/v3/geocode/regeo?key=你的key&location="+lnglatXY[0]+","+lnglatXY[1]+"&poitype=&radius=1000&extensions=all&batch=false&roadlevel=0",method:"get"}).done(function(msg){//注意获取过来就是一个对象varaddressName=msg.regeocode.formatted_address;console.log(addressName);});});}}};

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。