vue里面通过经纬度获取地图、经纬度转中文地址、中文地址转经纬度

 1.html部分

 <span style="color: #409eff" @click="getMapFun">
     <i class="fks-icon-s-location" />
      经纬度定位预览
 </span>

<el-dialog
        :title="$t('amap')"
        :visible.sync="isShowMap"
        width="700"
        :append-to-body="true"
      >
        <MapConfig
          ref="mapConfigRef"
          style="width: 100%; height: 450px"
          v-if="isShowMap"
          :value.sync="tempLocation"
          :disabled="formType === 'view'"
        />
        <div class="flex justify-end mt-[20px]">
          <el-button @click="mapCheckClick(false)">取消</el-button>
          <el-button
            type="primary"
            @click="mapCheckClick(true)"
            :disabled="formType === 'view'"
            >确认</el-button
          >
        </div>
 </el-dialog>

2.js部分

getMapFun() {//点击按钮，调出高德地图，如果有经纬度直接传进去，通 
             //过this.$refs.mapConfigRef.setCenter(list);传进去就可以显示所在位置，如下图
      this.isShowMap = true;
      if (this.tempLocation) {
        this.$nextTick(() => {
          const list = this.tempLocation.split(",");
          this.$refs.mapConfigRef.setCenter(list);
        });
      }
    },
//如果没有经纬度，只有中文地址，那就通过中文地址获取到经纬度，
show() {
    this.form.regionalLocation = data.regionalLocation
    this.getLocation(regionalLocation || "");    
}

getLocation(value) {//中文地址转成经纬度
      if (!value) return;
      window.AMap.plugin("AMap.Geocoder", () => {
        const geocoder = new window.AMap.Geocoder({});
        geocoder.getLocation(value, (status, result) => {
          if (status === "complete" && result.info === "OK") {
            const mapCenter = [
              result?.geocodes[0]?.location?.lng,
              result?.geocodes[0]?.location?.lat,
            ];
            this.tempLocation = mapCenter.join(",");
          } else {
            this.$message.warning(
             '获取地址失败',
            );
          }
        });
      });
    },
 mapCheckClick(is) {
      if (is) {
        this.getAddress(this.tempLocation);//点击地图获取中文地址，传给后端
      }
      this.isShowMap = false;
    },

getAddress(value) {//获取中文地址
      if (!value || !value.includes(",")) return;
      //获取用户所在城市信息
      value = value.split(",") || [];
      window.AMap.plugin("AMap.Geocoder", () => {
        const geocoder = new window.AMap.Geocoder({});
        geocoder.getAddress(value, (status, result) => {
          if (status === "complete" && result.regeocode) {
            const address = result.regeocode.formattedAddress;
            this.form.regionalLocation = address;
          } else {
            this.$message.error(
              '"' +
                this.$t(
                  "failed_to_query_address_based_on_longitude_and_latitude",
                ) +
                '"',
            );
          }
        });
      });
    },

 注意：需要将地图挂载到项目里

 地图组件：传入经纬度就可以获取到地址地图

//MapConfig地图组件
<template>
  <div
    id="map-container"
    class="w-full h-full"
  />
</template>

<script>
export default {
  name:'MapConfig',
  props:{
    disabled:{
      type:Boolean,
      default:true
    },
    value:{
      type:String,
      default:''
    }
  },
  data(){
    return {
      marker:null,
      map:null
    };
  },
  mounted(){
    this.initData();
  },
  methods:{
    initData() {
      this.map = new AMap.Map('map-container', {
        viewMode: '2D',  // 默认使用 2D 模式
        zoom:11,  //初始化地图层级
        // center: [116.397428, 39.90923]  //初始化地图中心点
      });
      let list = this.value?this.value.split(','):[];
      list.length&&this.mapMark(list[0],list[1]);
      !this.disabled&&this.map.on('click', (ev) => {
        // 触发事件的对象
        var target = ev.target;
        // 触发事件的地理坐标，AMap.LngLat 类型
        var lnglat = ev.lnglat;
        // 触发事件的像素坐标，AMap.Pixel 类型
        var pixel = ev.pixel;
        // 触发事件类型
        var type = ev.type;
        this.mapMark(lnglat.lng,lnglat.lat);
      });
    },
    mapMark(lng,lat){
      const position = new AMap.LngLat(lng, lat); // Marker经纬度
      this.marker&&this.map.remove(this.marker);
      this.marker = new AMap.Marker({
        position: position,
        // content: markerContent, // 将 html 传给 content
        offset: new AMap.Pixel(0,0) // 以 icon 的 [center bottom] 为原点
      });
      this.map.add(this.marker);
      this.$emit('update:value',lng+','+lat);
    },
    setCenter(location) {
      if (!location || !location.length) return;
      this.map && this.map.setCenter(location);
    }
  }
};
</script>