vue 点击div 获取位置_vue接入高德地图点击获取经纬度

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