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

<template>
  <div class="map-container">
    <el-amap
      :vid="'amap'"
      :zoom="15"
      :center="center"
      @click="onMapClick"
    >
      <el-amap-search-box
        :on-search="onSearch"
        :search-option="searchOption"
      ></el-amap-search-box>
      <el-amap-marker
        v-for="(marker, index) in markers"
        :key="index"
        :position="marker"
      ></el-amap-marker>
    </el-amap>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      center: [121.59996, 31.197646],
      markers: [],
      searchOption: {
        city: '010', // Beijing city code
        citylimit: true
      }
    };
  },
  methods: {
    onSearch(pois) {
      const lat = pois[0].lat;
      const lng = pois[0].lng;
      this.markers.push([lng, lat]);
    },
    onMapClick(e) {
      const { lng, lat } = e.lnglat;
      this.markers.push([lng, lat]);
    }
  }
};
</script>
 
<style>
.map-container {
  width: 500px;
  height: 400px;
}
</style>

这段代码提供了一个基本的Vue组件，用于在Element-Plus的el-amap组件中实现高德地图的搜索提示、点击地图获取位置以及标记位置的功能。代码中包含了必要的数据绑定和方法处理，可以作为实现相关功能的参考。