//如果只需要獲取經(jīng)緯度可以跳過這步，經(jīng)緯度逆解析為詳細(xì)地址時(shí)需要配置這個(gè)
<script type="text/javascript">
   window._AMapSecurityConfig = {
   		securityJsCode: 'XXX', //所申請(qǐng)的安全密鑰 注意這是安全密鑰而不是key
   }
</script>

//我是封裝在antd的彈窗組件中
<template>
  <a-modal title="選擇區(qū)域" :visible="visible" @ok="handleOk" @cancel="handleCancel" okText="提交" cancelText="取消">
    <div id="container"></div>
    <div class="toolbar">
      當(dāng)前坐標(biāo): {{ point[0] }}, {{ point[1] }}
      <br />
      地址: {{ address }}
    </div>
  </a-modal>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
  name: 'MapDialog',
  data() {
    return {
      visible: false, //彈窗顯隱
      center: [115.97539, 28.715532], //地圖中心點(diǎn)
      point: [], //經(jīng)緯度-lng lat
      map: null, //地圖實(shí)例
      marker: null, //地圖icon
      geocoder: null, //逆解析實(shí)例
      address: null //地址
    }
  },
  methods: {
    // 打開彈窗
    open({ point, address }) {
      // 如果父組件攜帶了參數(shù) 賦值做回顯
      if (point && address) {
        this.address = address
        this.point = point
        this.center = point
      }
      // 打開彈窗
      this.visible = true
      //地圖初始化
      this.initMap()
    },
    //DOM初始化完成進(jìn)行地圖初始化
    initMap() {
      AMapLoader.load({
        key: 'XXX', // 申請(qǐng)好的Web端開發(fā)者Key，首次調(diào)用 load 時(shí)必填
        version: '2.0', // 指定要加載的 JSAPI 的版本，缺省時(shí)默認(rèn)為 1.4.15
        plugins: [
          'AMap.Geocoder', // 逆向地理解碼插件
          'AMap.Marker' // 點(diǎn)標(biāo)記插件
        ] // 需要使用的的插件列表
      })
        .then(AMap => {
          this.map = new AMap.Map('container', {
            //設(shè)置地圖容器id
            zoom: 12, //初始化地圖級(jí)別
            center: this.center //初始化地圖中心點(diǎn)位置
          })
          // 如果父組件傳入了有效值 回顯一個(gè)icon
          if (this.point.length > 0) {
            this.addMarker()
          }
          //監(jiān)聽用戶的點(diǎn)擊事件
          this.map.on('click', e => {
            let lng = e.lnglat.lng
            let lat = e.lnglat.lat
            this.point = [lng, lat]
            // 增加點(diǎn)標(biāo)記
            this.addMarker()
            // 獲取地址
            this.getAddress()
          })
        })
        .catch(e => {
          console.log(e)
        })
    },
    // 增加點(diǎn)標(biāo)記
    addMarker() {
      // 清除其他icon
      if (this.marker) {
        this.marker.setMap(null)
        this.marker = null
      }
      // 重新渲染icon
      this.marker = new AMap.Marker({
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        position: this.point, //icon經(jīng)緯度
        offset: new AMap.Pixel(-13, -30) //icon中心點(diǎn)的偏移量
      })
      this.marker.setMap(this.map) //設(shè)置icon
    },
    // 將經(jīng)緯度轉(zhuǎn)換為地址
    getAddress() {
      const self = this
      // 這里通過高德 SDK 完成。
      this.geocoder = new AMap.Geocoder({
        city: '全國', //地理編碼時(shí)，設(shè)置地址描述所在城市; 默認(rèn)全國; 可選值：城市名（中文或中文全拼）、citycode、adcode
        radius: 1000, //逆地理編碼時(shí)，以給定坐標(biāo)為中心點(diǎn); 默認(rèn)1000; 取值范圍(0-3000)
        extensions: 'all' //逆地理編碼時(shí)，返回信息的詳略; 默認(rèn)值：base，返回基本地址信息; 默認(rèn)值：base，返回基本地址信息
      })
      //調(diào)用逆解析方法 個(gè)人開發(fā)者調(diào)用量上限5000（次/日）
      this.geocoder.getAddress(this.point, function(status, result) {
        if (status === 'complete' && result.info === 'OK') {
          if (result && result.regeocode) {
            // this指向改變
            self.address = result.regeocode.formattedAddress
          }
        }
      })
    },
    // 提交回調(diào)
    handleOk() {
      this.$emit('callback', { point: this.point, address: this.address })
      this.map = null
      this.marker = null
      this.visible = false
    },
    // 取消回調(diào)
    handleCancel() {
      this.map = null
      this.marker = null
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-modal {
  width: 100vw !important;
  max-width: 100vw !important;
  top: 0;
  padding-bottom: 0;
  .ant-modal-body {
    height: calc(100vh - 55px - 53px);
    overflow-y: auto;
    padding: 0;
    .search-box {
      width: 100%;
      height: 150px;
    }
    #container {
      padding: 0px;
      margin: 0px;
      width: 100%;
      height: 100%;
      .amap-icon img,
      .amap-marker-content img {
        width: 25px;
        height: 34px;
      }
    }
    .toolbar {
      position: absolute;
      bottom: 50px;
      left: 0;
      width: 100%;
      height: 100px;
      background-color: #fff;
      font-size: 20px;
      text-align: center;
      line-height: 50px;
    }
  }
}
</style>