vue3 高德地图关键词搜索获取经纬度的示例代码

  <el-tag v-if='isSave' size="small" style="cursor:pointer;margin-left:20px;" @click="open()">点击选取</el-tag>
<el-dialog
          class="dialog companygoodsLog"
          v-model="visible"
          :close-on-click-modal="false"
          :draggable="true"
          :show-close="false"
          title="位置选择"
          destroy-on-close
          style="border-radius: 4px;background-color: #ffffff"
          top="100px"
          width="80%">
          <div style="height:40px;width:100%;display: flex;align-items: center;">
              <el-select
                  v-model="areaValue"
                  filterable
                  style='width:350px'
                  remote
                  reserve-keyword
                  placeholder="请输入关键词"
                  :remote-method="remoteMethod"
                  :loading="loading"
                  @change="currentSelect"
              >
                      <el-option
                        v-for="item in areaList"
                        :key="item.id"
                        :label="item.name"
                        :value="item"
                        class="one-text"
                    >
                      <span style="float: left">{{ item.name }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{item.district}}{{item.address}}</span>
                  </el-option>
              </el-select>
          </div>
          <div id="container" style="height:500px;width:100%;margin-top:10px;"></div>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="visible = false"><span style="color: #5E5E5E">关闭</span></el-button>
              <el-button color="#68964C" @click="confirmData">
              确定
              </el-button>
            </span>
          </template>
      </el-dialog>

<script setup lang="ts">
import { reactive,ref,onMounted, onUnmounted,watch  } from 'vue'
import AMapLoader from "@amap/amap-jsapi-loader";
const dialogMap = ref(false)
const mapContainer = ref(null);
const visible:any = ref(false)
const areaList:any =ref([])
const areaValue = ref('')
let map:any = null
const loading:any = ref(false)
const checkedForm:any = ref()
let AutoComplete:any = null
let aMap:any = null
let geoCoder:any = null
const initMap = () => {
    AMapLoader.load({
    key: "高德key",
    version: "2.0", 
    plugins: ["AMap.Geocoder", "AMap.AutoComplete"], 
  }).then((AMap:any) => {
      aMap = AMap
      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [116.397428, 39.90923], // 初始化地图中心点位置
      });
      AutoComplete = new AMap.AutoComplete({
        city:'全国',
      });
      geoCoder = new AMap.Geocoder({
        city: "010", //城市设为北京，默认：“全国”
        radius: 1000, //范围，默认：500
      });
      map.on('click',(e:any)=>{
        addmark(e.lnglat.getLng(),e.lnglat.getLat(),AMap)
      })
    })
    .catch((e) => {
      console.log(e);
    });
}
let marker:any = null
const addmark = (lat:any,lng:any,AMap:any) => {
    marker && removeMarker()
    marker = new AMap.Marker({
            position: new AMap.LngLat(lat, lng),
            title: '北京',
            zoom: 13
    });
    checkedForm.value = {
        lat:lng,
        lng:lat,
    }
    map.add(marker);
    map.setCenter([lat, lng],'',500);
}
const removeMarker = () => {
    map.remove(marker)
}
const remoteMethod = (searchValue:any) => {
    if (searchValue !== "") {
      setTimeout(() => {
          AutoComplete.search(searchValue, (status:any, result:any) => {
              console.log(result,status)
              if(result.tips?.length){
                  areaList.value = result?.tips
              }
          });
      }, 200);
    } else {
    }
}
const currentSelect = (val:any) => {
    checkedForm.value = {
        lat:val.location?.lat,
        lng:val.location?.lng,
    }
    console.log(val)
    areaValue.value = val.name
    addmark(val.location?.lng,val.location?.lat,aMap)
    map.setCenter([val.location?.lng,val.location?.lat],'',500);
}
const confirmData = () => {
    if(!checkedForm.value?.lat || !checkedForm.value?.lng){
        return ElMessage.error('请选择地址')
    }else{
      console.log(checkedForm.value)
      visible.value = false
      areaValue.value = ''
      map?.destroy();
      list.longitude = checkedForm.value.lng
      list.latitude = checkedForm.value.lat
    }
}
const open = () => {
    initMap()
    visible.value = true
}
defineExpose({
    open
})
onUnmounted(() => {
  map?.destroy();
});
</script>

<el-button v-if="list.longitude" type="primary"  style="margin-bottom: 20px;"@click="showMapDialog()">点击查看位置</el-button>
<el-dialog v-model="dialogMap" title="位置信息" width="900px">
            <div ref="mapContainer" id="container" style="height:500px;width:100%;margin-top:10px;"></div>
        </el-dialog>
<script setup>
import { reactive, ref, onMounted, toRefs, watch } from 'vue'
import AMapLoader from "@amap/amap-jsapi-loader";
const dialogVisible = ref(false)
const dialogMap = ref(false)
const mapContainer = ref(null);
const props = defineProps({
    isShow15: {
        type: Boolean,
        default: false,
    },
    list:{
        default:{}
    }
});
const emits = defineEmits(['close15'])
const closeDialog = () => {
    emits('close15', false)
}
const mapList = ref([])
watch(() => props.isShow15, (val) => {
    // console.log(val)
    dialogVisible.value = val
}, { immediate: true })
watch(() => props.list, (val) => {
    mapList.value = val
}, { immediate: true })
const showMapDialog = async () => {
    dialogMap.value = true;
    initMap();
};
let map = null
let aMap = null
let AutoComplete = null
let geoCoder = null
let marker = null;
const initMap = () => {
    AMapLoader.load({
    key: "高德地图key",
    version: "2.0", 
    plugins: ["AMap.Geocoder", "AMap.AutoComplete"], 
  }).then((AMap) => {
      aMap = AMap
      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "2D", // 是否为3D地图模式
        zoom: 21, // 初始化地图级别
        center: [parseFloat(mapList.value.longitude), parseFloat(mapList.value.latitude)], // 初始化地图中心点位置
      });
      AutoComplete = new AMap.AutoComplete({
        city:'全国',
      });
      geoCoder = new AMap.Geocoder({
        city: "010", //城市设为北京，默认：“全国”
        radius: 1000, //范围，默认：500
      });
      geoCoder = new AMap.Geocoder({
        city: "全国", //城市设为北京，默认：“全国”
        radius: 1000, //范围，默认：500
      })
      marker = new aMap.Marker({
            position: [parseFloat(mapList.value.longitude), parseFloat(mapList.value.latitude)],
            map: map,
        });
    })
    .catch((e) => {
      console.log(e);
    });
}
</script>