vue3 Gaode Map Keyword Search Example Code for Getting Latitude and Longitude

  <el-tag v-if='isSave' size="small" style="cursor:pointer;margin-left:20px;" @click="open()">Click to select</el-tag>
<el-dialog
          class="dialog companygoodsLog"
          v-model="visible"
          :close-on-click-modal="false"
          :draggable="true"
          :show-close="false"
          title="Location Selection"
          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="Please enter keywords"
                  :remote-method="remoteMethod"
                  :loading="loading"
                  @change="currentSelect"
              >
                      <el-option
                        v-for="item in areaList"
                        :key=""
                        :label=""
                        :value="item"
                        class="one-text"
                    >
                      <span style="float: left">{{  }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{}}{{}}</span>
                  </el-option>
              </el-select>
          </div>
          <div  style="height:500px;width:100%;margin-top:10px;"></div>
          <template #footer>
            <span class="dialog-footer">
              &lt;el-button @click="visible = false"&gt;&lt;span style="color: #5E5E5E">Close</span></el-button>              &lt;el-button color="#68964C" @click="confirmData"&gt;
              Sure
              &lt;/el-button&gt;
            &lt;/span&gt;
          &lt;/template&gt;
      &lt;/el-dialog&gt;

<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 = () => {
    ({
    key: "Gaode key",
    version: "2.0", 
    plugins: ["", ""], 
  }).then((AMap:any) => {
      aMap = AMap
      map = new ("container", {
        // Set the map container id        viewMode: "3D", // Is it in 3D map mode?        zoom: 11, // Initialize map level        center: [116.397428, 39.90923], // Initialize the center point of the map      });
      AutoComplete = new ({
        city:'National',
      });
      geoCoder = new ({
        city: "010", //City is set to Beijing, default: "National"        radius: 1000, //Scope, default: 500      });
      ('click',(e:any)=>{
        addmark((),(),AMap)
      })
    })
    .catch((e) => {
      (e);
    });
}
let marker:any = null
const addmark = (lat:any,lng:any,AMap:any) => {
    marker && removeMarker()
    marker = new ({
            position: new (lat, lng),
            title: 'Beijing',
            zoom: 13
    });
     = {
        lat:lng,
        lng:lat,
    }
    (marker);
    ([lat, lng],'',500);
}
const removeMarker = () => {
    (marker)
}
const remoteMethod = (searchValue:any) => {
    if (searchValue !== "") {
      setTimeout(() => {
          (searchValue, (status:any, result:any) => {
              (result,status)
              if(?.length){
                   = result?.tips
              }
          });
      }, 200);
    } else {
    }
}
const currentSelect = (val:any) => {
     = {
        lat:?.lat,
        lng:?.lng,
    }
    (val)
     = 
    addmark(?.lng,?.lat,aMap)
    ([?.lng,?.lat],'',500);
}
const confirmData = () => {
    if(!?.lat || !?.lng){
        return ('Please select the address')
    }else{
      ()
       = false
       = ''
      map?.destroy();
       = 
       = 
    }
}
const open = () => {
    initMap()
     = true
}
defineExpose({
    open
})
onUnmounted(() => {
  map?.destroy();
});
</script>

<el-button v-if="" type="primary"  style="margin-bottom: 20px;"@click="showMapDialog()">Click to view location</el-button>
<el-dialog v-model="dialogMap" title="Location Information" width="900px">
            <div ref="mapContainer"  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) => {
    // (val)
     = val
}, { immediate: true })
watch(() => , (val) => {
     = val
}, { immediate: true })
const showMapDialog = async () => {
     = true;
    initMap();
};
let map = null
let aMap = null
let AutoComplete = null
let geoCoder = null
let marker = null;
const initMap = () => {
    ({
    key: "Gaod Map Key",
    version: "2.0", 
    plugins: ["", ""], 
  }).then((AMap) => {
      aMap = AMap
      map = new ("container", {
        // Set the map container id        viewMode: "2D", // Is it in 3D map mode?        zoom: 21, // Initialize map level        center: [parseFloat(), parseFloat()], // Initialize the center point of the map      });
      AutoComplete = new ({
        city:'National',
      });
      geoCoder = new ({
        city: "010", //City is set to Beijing, default: "National"        radius: 1000, //Scope, default: 500      });
      geoCoder = new ({
        city: "National", //City is set to Beijing, default: "National"        radius: 1000, //Scope, default: 500      })
      marker = new ({
            position: [parseFloat(), parseFloat()],
            map: map,
        });
    })
    .catch((e) => {
      (e);
    });
}
</script>