一、首先引入地图(代码在最后)
二、然后是打点获取坐标和名称的方法(代码在最后)
重点!!!
如果不加上密钥的话可能会得不到数据名称
你想要的代码来了
// 密钥
window._AMapSecurityConfig={
securityJsCode:''//你申请key之后的密钥
}
async initMap() {
let AMap = await AMapLoader.load({
key: "",//你申请的key
version: "2.0",
plugins: [
"AMap.PolygonEditor",
"AMap.Autocomplete",
"AMap.PlaceSearch",
"AMap.Scale",
"AMap.OverView",
"AMap.ToolBar",
"AMap.MapType",
"AMap.PolyEditor",
"AMap.CircleEditor",
"AMap.Geolocation",
"AMap.Geocoder",
"AMap.AMapUI",
"AMap.ControlBar",
"AMap.Marker",
],
});
this.map = new AMap.Map("container", {
center: this.center,
resizeEnable: true,
zoom: 14,
plugin: [
// 一些工具插件
{
pName: "MapType", // 地图类型
defaultType: 0,
events: {
init(instance) {},
},
},
],
});
//下面是方法
showInfoClick(e) {
var geocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
});
//
this.center = [];
this.center.push(e.lnglat.getLng());
this.center.push(e.lnglat.getLat());
this.addMarker();
var text =
"您在 [ " +
e.lnglat.getLng() +
"," +
e.lnglat.getLat() +
" ] 的位置单击了地图!";
console.log(text);
// 翻译点的名称
let lnglat=this.center
let _this=this
// console.log(lnglat, '----->>>')
geocoder.getAddress(lnglat, function(status, result) {
// console.log(status,result, '----->>>')
if (status === 'complete'&&result.regeocode) {
var address = result.regeocode.formattedAddress;
let mapData={
address,
lnglat
}
//_this.$emit("selectLocation", mapData);
// console.log(_this, '----->>>')
}else{
console.log('根据经纬度查询地址失败')
}
});
},
希望可以帮到你o(* ̄▽ ̄*)ブ