安装vue-amap
npm install --save vue-amap
在main.js中引入如下
// 引入地图
import aMap from 'vue-amap'
Vue.use(aMap)
aMap.initAMapApiLoader({
key: '高德地图中的key',
plugin: ['AMap.Geolocation']
})
index.vue中
选择位置(要是地图没有出来，刷新一下页面)
vid="amapDemo"
:center="center"
:zoom="zoom"
class="amap-demo"
:events="events">
纬度：{{ lng }}, 经度：{{ lat }}
index.vue的data中
let self = this;
return {
zoom: 12,
center: [121.59996, 31.197646],
events: {
click(e) {
let { lng, lat } = e.lnglat;
self.lng = lng;
self.lat = lat;
// 这里通过高德 SDK 完成。
var geocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
});
geocoder.getAddress([lng ,lat], function(status, result) {
if (status === 'complete' && result.info === 'OK') {
if (result && result.regeocode) {
self.address = result.regeocode.formattedAddress;
self.$nextTick();
}
}
});
}
},
lng: '',
lat: ''
样式
.amap-demo {
height: 400px;
}
标签：vue,经纬度,self,amap,lat,lng,高德,result
来源： https://blog.csdn.net/w1316022737/article/details/99439135