安裝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