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>

  自己写了个方法，使用原生js获取地址栏(或者指定地址)的参数

getParams(name,url)
1、name，需要获取参数的名称，为空的话，直接返回参数的json对象
2、url , 需要传入的地址，默认为浏览器的地址

/**
 * @function 获取浏览器地址的参数
 * @param {String} [name=''] 获取值的key,默认为空,为空时，函数返回json对象
 * @param {String} [url=window.location.href] 地址，默认为浏览器的url
 * @example  getParams('aa', 'https://www.baidu.com?aa=101')       //101
 */
const getParams = (name = '', url = window.location.href) => {
    let endVal = '';
    if (url.indexOf("?") != -1) {   //判断url中有没有出现?
        let arrs = url.substring(url.indexOf("?") + 1).split('&');  //截取字符串，获取到?后面的那部分内容;以&符号为准，分割成数组
        arrs = arrs.filter(item => item);     //原有数组过滤为空的值
        let obj = {};
        for (let i = 0; i < arrs.length; i++) {
            let index = arrs[i].indexOf("=");
            let keys = arrs[i].substring(0, index);       //第一个等号前面的那部分
            let vals = arrs[i].substring(index + 1);      //第一个等号后面的内容
            if (keys) {     //keys不为空时，追加到obj对象里
                obj[keys] = decodeURI(vals);    //解码输出,值含有中文字符的情况
            }
        }
        if (arrs.length > 0) {  //先判断数组是不是为空，在判断name是不是有值传过来
            if (name) {
                endVal = obj[name] || '';
            } else {
                endVal = obj;
            }
        }
    }
    return endVal;
}

根据经纬度获取对应地址名称

/**
	 * 获取地理位置名称
	 *
	 * param location
	 *            经纬度坐标,经度在前,纬度在后，经纬度间以“,”分割
	 * return
	 */
	public static String getAddressNameByGeocoder1(String location) {
		String jsonString = sendGet(getRegeoUrl(location));
		JSONObject jsonObject = JSONObject.parseObject(jsonString);
		String addressName = jsonObject.getJSONObject("regeocode").getString("formatted_address");
		return addressName;
	}
 
	/**
	 * 向指定URL发送GET方法的请求
	 *
	 * param url
	 *            发送请求的URL
	 * return URL 所代表远程资源的响应结果
	 */
	public static String sendGet(String url) {
		String result = "";
		BufferedReader in = null;
		try {
			String urlNameString = url;
			URL realUrl = new URL(urlNameString);
			// 打开和URL之间的连接
			URLConnection connection = realUrl.openConnection();
			// 设置通用的请求属性
			connection.setRequestProperty("accept", "*/*");
			connection.setRequestProperty("connection", "Keep-Alive");
			connection.setRequestProperty("user-agent", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;SV1)");
			// 建立实际的连接
			connection.connect();
			// 定义 BufferedReader输入流来读取URL的响应
			in = new BufferedReader(new InputStreamReader(connection.getInputStream(), "UTF-8"));
			String line;
			while ((line = in.readLine()) != null) {
				result += line;
			}
		} catch (Exception e) {
			return null;
		} finally { // 使用finally块来关闭输入流
			try {
				if (in != null) {
					in.close();
				}
			} catch (Exception e2) {
				e2.printStackTrace();
			}
		}
		return result;
	}
 
 
	/**
	 * 逆地理编码url
	 *
	 * param location
	 *            经纬度坐标,经度在前,纬度在后，经纬度间以“,”分割
	 * return
	 */
	public static String getRegeoUrl(String location) {
		return "http://restapi.amap.com/v3/geocode/regeo?location=" + location
				+ "&key=17479d86c0c6a0305024e1142351a0a4";
	}

转载自：https://blog.csdn.net/z_740771101/article/details/90174656