1.引入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=xxxxxxxxxxxxxx"></script>

2.初始化地图

      let that = this;

      that.map = new AMap.Map('carContainer', {

        resizeEnable: true,

      })

      // 为地图注册click事件获取鼠标点击出的经纬度坐标

      that.map.on('click', function (e) {

        var lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()];

        that.init(lnglatXY)

      });

3.地址获取经纬度

let _this = this;

      window.AMap.plugin('AMap.PlaceSearch', function () {

        var autoOptions = {

          city: '全国',

          map: _this.map, // 展现结果的地图实例

          pageSize: 1, // 单页显示结果条数

          pageIndex: 1, // 页码

          autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围

        };

        var placeSearch = new window.AMap.PlaceSearch(autoOptions);

        placeSearch.search(_this.formInline.text, function (status, result) {

          // 搜索成功时，result即是对应的匹配数据

          if (status == 'complete') {

            if (result.poiList.pois.length = 0) {

              ElMessage.error('没有查询到对应的地址');

            }else{    

                 let lng = result.poiList.pois[0].location.lng;

                 let lat = result.poiList.pois[0].location.lat

            }

          } else if (status == 'no_data') {

            ElMessage.error('没有查询到对应的地址');

          }

        });

      });

4.经纬度获取地址

AMap.plugin('AMap.Geocoder', function () {

        var geocoder = new AMap.Geocoder({

          radius: 1000,

          extensions: "all"

        });

        geocoder.getAddress(lnglatXY, function (status, result) {

          if (status === 'complete' && result.info === 'OK') {

            var address = result.regeocode.formattedAddress;

            that.address = address  //兑换地址

            that.$emit('getaddress', that.address, lnglatXY)

          } else {

            ElMessage.error('无地址，请重新选择');

          }

        });

        // 清除所有标记

        that.map.clearMap();

        var marker = new AMap.Marker();

        that.map.add(marker);

        marker.setPosition(lnglatXY);

      })

 完整代码

<template>
  <el-dialog
    title="客户地址"
    v-model="Visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="1000px"
    @close="addressClose"
  >
    <div>
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item
          label="查询"
          v-if="0"
        >
          <el-input
            v-model="formInline.text"
            placeholder="请输入要搜索的地址"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="formInline.text"
            placeholder="请输入要搜索的地址"
            style="width:500px;"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onQuery"
          >查询</el-button>
        </el-form-item>
      </el-form>
      <div id="carContainer"></div>
    </div>
  </el-dialog>
</template>

<script>
import AMap from 'AMap'
import { ElMessage } from "element-plus";
export default {
  props: {
    locationVisible: {
      type: Boolean,
      default: true
    },
    customerAddress: {
      type: String,
      default: ''
    }
  },
  emits: ['getaddress', 'addressClose'],//这里需要写出定义的事件名
  data () {
    return {
      formInline: {
        text: ''
      },
      map: null,
      address: '',
      Visible: false
    };
  },
  watch: {
    locationVisible (val) {
      if (val) {
        this.Visible = true
        // 在这里使用$nextTick初始化地图插件即可
        this.$nextTick(() => {
          this.ready()
        });
      } else {
        this.Visible = false
      }
    },
    customerAddress (val) {
      this.formInline.text = val
    }
  },
  mounted () {
    window.onLoadMap = () => {
      this.ready();
    };
  },
  methods: {
    addressClose () {
      this.$emit('addressClose')
    },
    // 查询
    onQuery () {
      this.init1()
    },
    // 初始化
    ready () {
      let that = this;
      that.map = new AMap.Map('carContainer', {
        resizeEnable: true,
      })
      // 为地图注册click事件获取鼠标点击出的经纬度坐标
      that.map.on('click', function (e) {
        var lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()];
        that.init(lnglatXY)
      });
      if (this.formInline.text) {
        that.onQuery()
      }
    },
    // 地址获取经纬度  
    // let lng = result.poiList.pois[0].location.lng;
    // let lat = result.poiList.pois[0].location.lat;
    // _this.longAndLat = lng + ',' + lat;
    // _this.addMarker(lng, lat);
    init1 () {
      let _this = this;
      window.AMap.plugin('AMap.PlaceSearch', function () {
        var autoOptions = {
          city: '全国',
          map: _this.map, // 展现结果的地图实例
          pageSize: 1, // 单页显示结果条数
          pageIndex: 1, // 页码
          autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        };
        var placeSearch = new window.AMap.PlaceSearch(autoOptions);
        placeSearch.search(_this.formInline.text, function (status, result) {
          // 搜索成功时，result即是对应的匹配数据
          if (status == 'complete') {
            if (result.poiList.pois.length = 0) {
              ElMessage.error('没有查询到对应的地址');
            }
          } else if (status == 'no_data') {
            ElMessage.error('没有查询到对应的地址');
          }
        });
      });
    },
    //经纬度获取地址
    init (lnglatXY) {
      var that = this
      AMap.plugin('AMap.Geocoder', function () {
        var geocoder = new AMap.Geocoder({
          radius: 1000,
          extensions: "all"
        });
        geocoder.getAddress(lnglatXY, function (status, result) {
          if (status === 'complete' && result.info === 'OK') {
            var address = result.regeocode.formattedAddress;
            that.address = address  //兑换地址
            that.$emit('getaddress', that.address, lnglatXY)
          } else {
            ElMessage.error('无地址，请重新选择');
          }
        });
        // 清除所有标记
        that.map.clearMap();
        var marker = new AMap.Marker();
        that.map.add(marker);
        marker.setPosition(lnglatXY);
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.el-dialog {
  #carContainer {
    width: 100%;
    height: 500px;
  }
}
</style>