Vue3 + Element-Plus 对接高德地图实现搜索提示选址、点击地图选址、自我定位功能（最新）

1、效果展示

2、实现代码

2.1 GaoDeMap.vue

---

<template>
  <div style="width: 100%;">
    <div class="search-box">
      <el-select v-model="address" clearable placeholder="请输入位置关键词" style="width: 240px;" :remote-method="remoteMethod"
        filterable remote @change="currentSelect" class="one-text" size="default">
        <el-option v-for="(item, index) in areaList" :key="index" :label="item.district + item.name"
          :value="item.district + item.name">
          <span>{
   {
    item.district }}</span> <span>{
   {
    item.name }}</span>
        </el-option>
      </el-select>

      <el-button type="success" v-if="addressGet" class="address">{
   {
    addressGet.split(",")[0] }}</el-button>
    </div>
    <div id="container" class="map"></div>
  </div>
</template>

<script setup>
import {
    reactive, ref, toRefs, onMounted, nextTick, defineProps, defineEmits } from 'vue';
import AMapLoader from "@amap/amap-jsapi-loader";
// 定义 props 和 emits
const emits = defineEmits(['address']);
const props = defineProps({
   
  addressClick: Function,
})
onMounted(() => {
   
  window._AMapSecurityConfig = {
   
    securityJsCode: '你的安全密钥', // https://console.amap.com/dev/key/app   绑定的服务为 Web端
  }
  initMap()
})
const addressGet = ref("")

const state = reactive({
   
  map: null,
  placeSearch: null,
  autoComplete: null,
  marker: null,
  form: {
   
    address: '',
    lng: '',
    lat: '',
  },
  areaList: [],
  address: ''
})

const {
    areaList, address } = toRefs(state)
function initMap(arr) {
   
  AMapLoader.load({
   
    key: "安全密钥左边的key的值",	// https://console.amap.com/dev/key/app   绑定的服务为 Web端
    version: "2.0",
    plugins: ["AMap.ToolBar", "AMap.ControlBar", 'AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Geocoder', 'AMap.Marker', 'AMap.Geolocation'],
  }).then((AMap) => {
   
    state.map = new AMap.Map('container', {
   
      viewMode: "3D",  //  是否为3D地图模式
      zoom: 15,
      center: arr,
      resizeEnable: true
    });
    // 地图放大缩小插件
    let toolBar = new AMap.ToolBar({
   
      position: {
   
        top: '120px',
        right: '51px'
      }
    })
    // 3D地图插件
    let controlBar = new AMap.ControlBar