npm i @amap/amap-jsapi-loader --save

<template lang="html">
  <el-dialog v-dialogDrag title="選擇地點(diǎn)" append-to-body width="600px" :visible.sync="mvisible" :close-on-click-modal="false"
             @close="cancel"
  >
    <div id="amap-container">
      <el-input
        id="search-input"
        v-model="searchValue"
        class="input-with"
        placeholder="請輸入地址"
        clearable
        @clear="handelclearInput"
        @keyup.native.enter="onhandelSearch"
      >
        <el-button
          slot="append"
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="onhandelSearch"
        >搜索
        </el-button>
      </el-input>
      <el-row class="margin-top-10 address">
        當(dāng)前地址是： {{ formattedAddress }}
      </el-row>
      <div id="custom-amap" />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handelSave">保 存</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
// const AMap = window.AMap
export default {
  name: 'AMap',
  props: {
    defaultValue: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      mvisible: false,
      defaultCity: '',
      // 地圖對象
      map: null,
      // 定位默認(rèn)地址 | 搜索后選擇的地址
      formattedAddress: null,
      // 地址對應(yīng)的經(jīng)緯度信息
      position: {},
      // 檢索關(guān)鍵字
      searchValue: '',
      // 檢索函數(shù)對象
      placeSearch: null,
      // 檢索結(jié)果數(shù)據(jù)數(shù)據(jù)
      searchInfoList: [],
      // 地圖標(biāo)記
      marker: '',
      // 地址解析（正向）
      geocoder: '',
      // 地址名稱
      name: '',
      adcode: ''
    }
  },
  watch: {
    defaultValue() {
      this.searchValue = this.defaultValue
    },
    visible() {
      this.mvisible = this.visible
      this.searchValue = this.defaultValue
      // this.searchValue = '四川省成都市武侯區(qū)'
      this.formattedAddress = this.defaultValue
      // 初始化地圖頁面
      this.initMap()
    }
  },
  beforeDestroy() {
    // 銷毀地圖
    this.map.destroy()
  },
  methods: {
    //   初始化地圖頁面
    initMap() {
      AMapLoader.load({
        key: 'dc4da34d26ef0a0851ce91ce099f6f46', // 申請好的Web端開發(fā)者Key，首次調(diào)用 load 時(shí)必填
        version: '2.0', // 指定要加載的 JSAPI 的版本，缺省時(shí)默認(rèn)為 1.4.15
        plugins: [''] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.map = new AMap.Map('custom-amap', { // 設(shè)置地圖容器id
          viewMode: '3D', // 是否為3D地圖模式
          zoom: 5, // 初始化地圖級別
          resizeEnable: true,
          center: [105.602725, 37.076636] // 初始化地圖中心點(diǎn)位置
        })
        // 添加maker
        this.setMaker()
        // 添加鼠標(biāo)點(diǎn)選地圖選擇地址
        this.addAmapGeocoder()
        this.onhandelSearch()
      }).catch(e => {
        console.log(e)
      })
    },
    // 添加maker
    setMaker() {
      // eslint-disable-next-line no-undef
      this.marker = new AMap.Marker()
      this.map.add(this.marker)
      // 添加解析地理位置插件
      this.map.plugin('AMap.Geocoder', () => {
        // 異步加載插件
        this.geocoder = new AMap.Geocoder({
          city: this.defaultCity, // 默認(rèn)：“全國”
          radius: 1000 // 范圍，默認(rèn)：500
        })
      })
    },
    // 添加鼠標(biāo)點(diǎn)選地圖選擇地址
    addAmapGeocoder() {
      // 添加maker
      this.setMaker()
      // 地圖添加點(diǎn)擊事件
      this.map.on('click', function(e) {
        console.log('e.lnglat.getLng()', e.lnglat.getLng())
        // document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
      })
      this.map.on('click', e => {
        console.log('e====', e)
        const lnglat = [e.lnglat.getLng(), e.lnglat.getLat()]
        this.marker.setPosition(lnglat)
        this.geocoder.getAddress(lnglat, (status, result) => {
          if (status === 'complete' && result.regeocode) {
            const res = result.regeocode
            const { adcode, province, city, district } = res.addressComponent
            this.searchValue = res.formattedAddress
            const name = province + city + district
            const sdata = { adcode, lng: lnglat[0], lat: lnglat[1], name }
            this.searchSuccessData(sdata)
            console.log('result', result)
          } else {
            console.log(JSON.stringify(result))
          }
        })
      })
    },
    // 按鈕觸發(fā)檢索
    onhandelSearch() {
      const that = this
      this.geocoder.getLocation(this.searchValue, function(status, result) {
        if (status === 'complete' && result.geocodes.length) {
          const { lng, lat } = result.geocodes[0].location
          const { province, city, district } = result.geocodes[0].addressComponent
          const { adcode } = result.geocodes[0]
          const name = province + city + district
          const sdata = { adcode, lng, lat, name }
          that.searchSuccessData(sdata)
          that.marker.setPosition([lng, lat])
          that.map.add(that.marker)
          that.map.setFitView(that.marker)
        } else {
          this.$message.error('根據(jù)地址查詢位置失敗')
        }
      })
    },
    searchSuccessData(res) {
      this.formattedAddress = this.searchValue
      this.adcode = res.adcode
      this.name = res.name
      this.position = { lng: res.lng, lat: res.lat }
    },
    // 清除input里的值，清除搜索結(jié)果，再次初始化map
    handelclearInput() {
      document.querySelector('#searchResultPanel').innerHTML = ''
    },
    // 保存當(dāng)前選擇的地址,分發(fā)事件
    handelSave() {
      this.searchValue = this.formattedAddress
      const { lat, lng } = this.position
      if (lat && lng) {
        const data = {
          name: this.name,
          adcode: this.adcode,
          // 地址名稱
          address: this.formattedAddress,
          // 緯度lat
          lat,
          // 經(jīng)度lng
          lng
        }
        this.$emit('getPosition', true, data)
      } else {
        this.$message.error('請選擇地址獲取經(jīng)緯度')
      }
    },
    cancel() {
      this.$emit('getPosition', false)
    }
  }
}
</script>

<style scoped lang="scss">
#amap-container {
  margin: 20px;

  .el-input__clear {
    line-height: 34px;
    /*top: 20px;*/
  }

  #custom-amap {
    height: 30vh;
    width: 100%;
    margin-top: 10px;
    border: 1px solid #ccc;
  }

  .input-with {
    /*position: fixed;*/
    /*top: 40px;*/
    z-index: 1;
    width: 580px;
  }

  .address {
    color: #373737;
  }

}

.amap-sug-result {
  z-index: 99999;
}
</style>

 <el-input v-model="basicFormValidate.businessAddressDetail" @click.native="initMapConfirm" />
 <amap :visible="amapVisible" :default-value="basicFormValidate.businessAddressDetail" :business-province-id="basicFormValidate.businessProvinceId" @getPosition="mapConfirm" />
 import Amap from '@/views/common/Amap'
 components: { Amap }

    initMapConfirm() {
      this.amapVisible = true
    },
    mapConfirm(flag, data) {
      this.amapVisible = false
      if (flag) {
        this.basicFormValidate.businessAddressDetail = data.address
        this.basicFormValidate.businessAddressLatitude = data.lat
        this.basicFormValidate.businessAddressLongitude = data.lng
        this.basicFormValidate.businessProvinceId = data.businessProvinceId
      }
    }