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中

          <el-row>
          <el-col :span="6">
            <el-form-item>
              詳細地址：
              <el-input
                v-model="address"
                name="address"/>
            </el-form-item>
          </el-col>
        </el-row>
         
          <el-row>
          <el-col :span="4">
            <el-form-item>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              經度：
              <el-input
                v-model="lat"
                name="lat"
                type="number"/>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              緯度：
              <el-input
                v-model="lng"
                name="lng"
                type="number"/>
            </el-form-item>
          </el-col>
          </el-row>

          <el-row>
          <el-col :span="4">
            <el-form-item>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              省份：
              <el-input
                v-model="province"
                min="0"
                name="price"/>
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-form-item>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              市：
              <el-input
                v-model="city"
                min="0"
                name="full"/>
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-form-item>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              區：
              <el-input
                v-model="district"
                min="0"
                name="reduction"/>
            </el-form-item>
          </el-col>
          </el-row>

          <el-row>
          <el-col :span="4">
            <el-form-item>
            </el-form-item>
          </el-col>
          <el-col :span="14">
          <!-- <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult">
          </el-amap-search-box> -->
          <!-- 地圖 -->
          <div class="amap-page-container">
            <br/>
            <span style="color: red"> 選擇位置點擊一下就可以了（要是地圖沒有出來，刷新一下頁面） </span>
            <el-amap
              vid="amapDemo1"  
              :center="center"
              :zoom="zoom"  
              class="amap-demo"
              :events="events">
            </el-amap>
            <div class="toolbar">
              <br/>
            </div>
          </div>
          </el-col>
          </el-row>

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官網