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

initAMap(spot) {
  AMapLoader.load({
key: '', //设置您的key
version: "2.0",
plugins: ['AMap.ToolBar', 'AMap.Driving'],
AMapUI: {
version: "1.1",
plugins: [],
},
Loca: {
version: "2.0"
},
}).then((AMap) => {
this.map = new AMap.Map("container", {
resizeEnable: true,
center: [111.744718,40.78836],
zoom: 7
});
this.map.on('click',this.getLatLng);
if(spot!=null&&spot.length>1){
var marker = new AMap.Marker({
// icon: 'https://vdata.amap.com/icons/b18/1/2.png',
position: spot
});
this.map.add(marker)
}
}).catch(e => {
});
},
//地图点击事件
getLatLng(e){
var that=this;
this.map.clearMap();
that.form.lat=e.lnglat.getLat();
that.form.lng=e.lnglat.getLng();
var marker = new AMap.Marker({
// icon: 'https://vdata.amap.com/icons/b18/1/2.png',
position: [e.lnglat.lng, e.lnglat.lat]
});
this.map.add(marker);
var geocoder;
this.map.plugin(["AMap.Geocoder"], function() {
geocoder = new AMap.Geocoder({
city:'全国'
});
var lnglat=[e.lnglat.lng, e.lnglat.lat];
geocoder.getAddress(lnglat,function (status,result){
if (status === "complete" && result.info === "OK") {
    //城市
that.form.city=(result.regeocode.addressComponent.city).replace("市","");
console.log(that.form.city)
    //详细地址
that.form.projectAddress=result.regeocode.formattedAddress
}
})
});
},
posted @   zhangzikang  阅读(2081)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示