高德地图选择多个marker点

<template>
    <div class="container-multimap">
        <div class="searchBox">
            <el-input v-model="searchQuery" @keyup.enter="searchPlace" border placeholder="搜索地点" />
            <el-button @click="searchPlace" type="success">搜索</el-button>
            <el-button @click="clearMarkers" type="success">清空</el-button>
        </div>
        <div id="mapContainer" style="width: 100%; height:55vh;"></div>
    </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader"; //引入AMapLoader
import { getRandomAvatar } from "@/api/robot/manage.js"
export default {
    name: 'Map',
    props: {
        markersArray: {
            type: Array,
            default: []
        }
    },
    data() {
        return {
            map: null,
            markers: [], // 存储所有的标记点
            searchQuery: '',// 搜索查询
            placeSearch: null
        };
    },
    mounted() {
        this.initMap();
    },
    watch: {},
    methods: {
        initMap() {
            AMapLoader.load({
                key: "key", // 申请好的Web端开发者Key，首次调用 load 时必填
                version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: ["AMap.Geocoder"],
            })
            // 初始化地图
            this.map = new AMap.Map('mapContainer', {
                center: [120.264777, 30.221391], // 地图中心点
                zoom: 14 // 地图缩放级别
            });
            // 监听地图的点击事件
            this.map.on('click', this.addMarker);
        },
        async addMarker(event) {
            let position = ''
            let markerAddress = ''
            // 获取点击的位置
            if (event.type == "markerClick") {
                event = event.data
                position = [event.location.lng, event.location.lat];
                markerAddress = event.name
            } else {
                position = event.lnglat ? [event.lnglat.getLng(), event.lnglat.getLat()] : event;
                markerAddress = await this.getAddress(position)
            }
            // 生成唯一的ID
            const id = Date.now();
            let markerContent = document.createElement('div')
            let txtContent = document.createElement('div')
            let imgContent = document.createElement('img')
            imgContent.src = "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png";
            markerContent.className = 'custom-content-marker'
            markerContent.appendChild(imgContent);
            // 添加地址文字描述
            txtContent.className = 'txt-content'
            txtContent.innerHTML = markerAddress
            markerContent.appendChild(txtContent);

            // 添加删除按钮
            let deleteButton = document.createElement('div');
            deleteButton.innerHTML = 'X';
            deleteButton.className = 'close-btn';
            deleteButton.style.position = 'absolute';
            markerContent.appendChild(deleteButton);
            // 创建一个新的标记点
            let marker = new AMap.Marker({
                position: position,
                content: markerContent,
                map: this.map,
                extData: { id }, // 写入你的item对象,必须要加{
                offset: new AMap.Pixel(0, 0)
            });
            marker.on('click', (e) => {
                marker.setMap(null)
                let clickId = e.target.getExtData().id
                this.markers = this.markers.filter(m => m.id !== clickId);
                this.$emit('update:markersArray', this.markers)
            });
            // 将标记点存储到 markers 数组中
            const [lng, lat] = position
            const { data: { avatar, name, gender } } = await getRandomAvatar()
            this.markers.push({ id, marker, lng, lat, markerAddress, avatar, name, gender });
            this.$emit('update:markersArray', this.markers)
        },
        searchPlace() {
            if (!this.searchQuery) {
                return;
            }
            // 创建PlaceSearch实例
            this.placeSearch = new AMap.PlaceSearch({
                map: this.map
            });
            // 搜索查询
            this.placeSearch.search(this.searchQuery, (status, result) => {
                if (status === 'complete' && result.info === 'OK') {
                    // 设置地图中心到第一个搜索结果
                    if (result.poiList.pois.length > 0) {
                        this.map.setCenter(result.poiList.pois[0].location);
                    }
                } else {
                    alert('搜索失败，请重试');
                }
            });
            this.placeSearch.on('markerClick', this.addMarker)
        },
        clearMarkers() {
            this.markers.forEach(m => {
                m.marker.setMap(null);
            });
            this.markers = [];
            this.$emit('update:markersArray', this.markers)
            this.placeSearch.clear()
        },
        getAddress(position) {
            return new Promise((resolve, reject) => {
                let geocoder = new AMap.Geocoder({});
                geocoder.getAddress(position, (status, result) => {
                    if (status === "complete" && result.regeocode) {
                        const { regeocode: {
                            formattedAddress
                        } } = result
                        resolve(formattedAddress)
                    }
                });
            })
        },
        handlerMarker(id) {
            this.markers.forEach(m => {
                if (m.id == id) {
                    m.marker.setMap(null)
                }
            });
            this.markers = this.markers.filter(m => m.id !== id);
            this.$emit('update:markersArray', this.markers)
        }
    }
};
</script>

<style>
#mapContainer {
  width: 400px;
  height: 200px;
}
.searchBox {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  z-index: 1;
}
.custom-content-marker {
  z-index: 1;
  position: relative;
  width: 40px;
  height: 50px;
}

.custom-content-marker img {
  position: absolute;
  top: -50px;
  left: -20px;
  width: 100%;
  height: 100%;
}

.custom-content-marker .close-btn {
  position: absolute;
  top: -106px;
  right: -10px;
  width: 15px;
  height: 15px;
  font-size: 12px;
  background: #ccc;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 15px;
  box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);
}

.custom-content-marker .close-btn:hover {
  background: #666;
}
.txt-content {
  position: absolute;
  top: -100px;
  right: 0;
  color: #fff;
  padding: 4px;
  box-shadow: 1px 1px 1px rgba(10, 10, 10, 0.2);
  white-space: nowrap;
  font-size: 12px;
  font-family: "";
  background-color: #25a5f7;
  border-radius: 3px;
}
</style>