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', 'AMap.Geocoder']
})

在高德地图开发者中申请（https://lbs.amap.com/dev/key/app#）
3. index.vue中

          
          
            
              详细地址：
              
            
          
        
         
          
          
            
            
          
          
            
              经度：
              
            
          
          
            
            
          
          
            
              纬度：
              
            
          
          

          
          
            
            
          
          
            
              省份：
              
            
          
          
            
            
          
          
            
              市：
              
            
          
          
            
            
          
          
            
              区：
              
            
          
          

          
          
            
            
          
          
          
          
          

            

             选择位置点击一下就可以了（要是地图没有出来，刷新一下页面） 
            
            
            

              

            
          
          
          

4. index.vue的data中

    let self = this;
    return {
      zoom: 12,
      center: [121.59996, 31.197646],
      address: '',
      province: '',
      city: '',
      district: '',
      lng: '',
      lat: '',
      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([e.lnglat.lng, e.lnglat.lat], function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
              if (result && result.regeocode) {
                // 具体地址
                self.address = result.regeocode.formattedAddress;
                // 省
                self.province = result.regeocode.addressComponent.province;
                // 市
                self.city = result.regeocode.addressComponent.city;
                // 区
                self.district = result.regeocode.addressComponent.district;
                self.$nextTick();
              }
            }else {
              //alert('地址获取失败')
            }
          });        
        }
      },

5. 样式

.amap-demo {
  height: 400px;
}

6. 效果
   点击地图输入框中的数据就会跟着变
   

高德错误码说明点击获取
高德官网点击
vue官网