vue接入高德地图点击获取经纬度

1. 安装vue-amap

npm install --save vue-amap

2. 在main.js中引入如下

// 引入地图
import aMap from 'vue-amap'

Vue.use(aMap)

aMap.initAMapApiLoader({
  key: '高德地图中的key',
  plugin: ['AMap.Geolocation']
})

3. index.vue中

           <!-- 地图 -->
          <div class="amap-page-container">
            <br/>
            <span style="color: red"> 选择位置（要是地图没有出来，刷新一下页面） </span>
            <el-amap
              vid="amapDemo"  
              :center="center"
              :zoom="zoom"  
              class="amap-demo"
              :events="events">
            </el-amap>
            <div class="toolbar">
              <br/>
              <span style="color: red"> 纬度：{{ lng }}, 经度：{{ lat }} </span>
            </div>
          </div>

4. 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: ''

5. 样式

.amap-demo {
  height: 400px;
}

6. 效果
   点击获取经纬度
   
   官网：https://elemefe.github.io/vue-amap/#/zh-cn/examples/base/amap?id=点击地图获取经纬度和具体地址

来源：https://blog.csdn.net/w1316022737/article/details/99439135