vue2腾讯地图选择多个点

<template>
    <div class="container-multimap">
        <div class="searchBox">
            <div style="display: flex; margin-bottom: 10px">
                <el-input v-model="input" placeholder="请输入位置关键字"></el-input>
                <el-button type="primary" @click="searchPlace">搜索</el-button>
                <el-button @click="clearMarkers" type="success">清空</el-button>
            </div>
            <div class="adressBox" v-if="adressList.length">
                <div v-for="(item, index) in adressList" :key="index" @click="chooseAdress(item, index)">
                    <span class="el-icon-location" style="font-size: 16px; color: #409eff; margin-right: 10px">
                    </span>
                    <span :class="[item.isChoose === true ? 'check' : '']">{{
                        item.title
                        }}</span>
                </div>
                <div class="confirmBtn">
                    <el-button @click="confirmAdd" type="success">确定</el-button>
                </div>
            </div>
        </div>
        <div id="mapContainer" style="width: 100%; height:55vh;"></div>
    </div>
</template>

<script>
import { getRandomAvatar } from "@/api/robot/manage.js"
export default {
    name: 'Map',
    props: {
        markersArray: {
            type: Array,
            default: []
        }
    },
    data() {
        return {
            map: null,
            markers: [], // 存储所有的标记点
            searchQuery: '',// 搜索查询
            placeSearch: null,
            geocoder: null,
            input: '',
            adressList: [],
            searchMarkers: []
        };
    },
    mounted() {
        this.initMap();
    },
    watch: {},
    methods: {
        initMap() {
            // 初始化地图
            //定义map变量，调用 TMap.Map() 构造函数创建地图
            this.map = new TMap.Map(document.getElementById('mapContainer'), {
                center: [30.221391, 120.264777],//设置地图中心点坐标
                zoom: 14,   //设置地图缩放级别
            });
            this.geocoder = new TMap.service.Geocoder()
            // 监听地图的点击事件
            this.map.on('click', this.addMarker);
        },
        async addMarker(event) {
            let position = ''
            let markerAddress = ''
            // 获取点击的位置
            position = [event.latLng.lng, event.latLng.lat];
            if (event.poi) {
                markerAddress = event.poi.name
            } else {
                const res = await this.getAddress(event)
                console.log(res)
                markerAddress = res.result.address
            }
            // 生成唯一的ID
            const id = Date.now();
            // 创建一个新的标记点
            let marker = null
            marker = new TMap.MultiMarker({
                id: id,
                map: this.map,
                styles: {
                    "marker": new TMap.MarkerStyle({
                        "width": 35,
                        "height": 35,
                        "anchor": { x: 16, y: 32 },
                        "src": process.env.VUE_APP_BASE_URL + '/pics/icon/location-full.png'
                    })
                },
                geometries: [{
                    "id": 'demo',
                    "styleId": 'marker',
                    "position": event.latLng,
                    "properties": {
                        "title": "marker"
                    }
                }]
            });

            // 将标记点存储到 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)
        },
        getAddress(event) {
            return new Promise((resolve, reject) => {
                this.geocoder.getAddress({ location: event.latLng }).then(res => {
                    resolve(res)
                })
            })
        },
        searchPlace() {
            const suggest = new TMap.service.Suggestion({
                pageSize: 10, // 返回结果每页条目数
                regionFix: false, // 搜索无结果时是否固定在当前城市
                servicesk: "", // key
            });
            suggest
                .getSuggestions({
                    keyword: this.input,
                    servicesk: "", // 签名（可在腾讯地图开放平台中拿）
                })
                .then((result) => {
                    this.adressList = result.data;
                    this.adressList.forEach((item) => {
                        item.isChoose = false;
                    });
                });
        },
        clearMarkers() {
            this.markers.forEach(m => {
                m.marker.setMap(null);
            });
            this.markers = [];
            this.$emit('update:markersArray', this.markers)
        },
        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)
        },
        chooseAdress(data, index) {
            this.chooseItem = data;
            // 取消之前选中的地址样式
            this.adressList.forEach((item, i) => {
                if (i !== index) {
                    item.isChoose = false;
                }
            });
            // 设置当前选中的地址样式
            this.adressList[index].isChoose = true;
            this.$forceUpdate();
            this.reserMap(data.location.lat, data.location.lng, 15);
        },
        //地图显示
        reserMap(lat, lng, zoom) {
            this.searchMarkers.forEach(m => {
                m.marker.setMap(null);
            });
            const center = new TMap.LatLng(lat, lng);
            this.map.setCenter(center)
            this.map.setZoom(16)
            const marker = new TMap.MultiMarker({
                map: this.map,
                styles: {
                    "marker": new TMap.MarkerStyle({
                        "width": 35,
                        "height": 35,
                        "anchor": { x: 16, y: 32 },
                        "src": process.env.VUE_APP_BASE_URL + '/pics/icon/location-full.png'
                    })
                },
                geometries: [{
                    "id": 'demo',
                    "styleId": 'marker',
                    "position": center,
                    "properties": {
                        "title": "marker"
                    }
                }]
            });
            this.searchMarkers.push({ marker: marker })
        },
        confirmAdd() {
            this.searchMarkers.forEach(m => {
                m.marker.setMap(null);
            });
            this.adressList = []
            this.input = ''
            this.handlerAddMarker(this.chooseItem)
        },
        async handlerAddMarker(position) {
            let markerAddress = position.title
            // 生成唯一的ID
            const id = Date.now();
            // 创建一个新的标记点
            let marker = null
            marker = new TMap.MultiMarker({
                id: id,
                map: this.map,
                styles: {
                    "marker": new TMap.MarkerStyle({
                        "width": 35,
                        "height": 35,
                        "anchor": { x: 16, y: 32 },
                        "src": process.env.VUE_APP_BASE_URL + '/pics/icon/location-full.png'
                    })
                },
                geometries: [{
                    "id": 'demo',
                    "styleId": 'marker',
                    "position": position.location,
                    "properties": {
                        "title": "marker"
                    }
                }]
            });

            // 将标记点存储到 markers 数组中
            const { lng, lat } = position.location
            const { data: { avatar, name, gender } } = await getRandomAvatar()
            this.markers.push({ id, marker, lng, lat, markerAddress, avatar, name, gender });
            this.$emit('update:markersArray', this.markers)
        }
    }
};
</script>

<style>
#mapContainer {
  width: 400px;
  height: 200px;
}
.searchBox {
  position: absolute;
  top: -50px;
  right: 20px;
  z-index: 9999;
}
.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;
}

.adressBox {
  width: 100%;
  height: 200px;
  overflow: auto;
  border: 1px solid #c5c5c5;
  background-color: #fff;
  border-radius: 6px;
  margin-bottom: 20px;
}
.adressBox div {
  font-size: 16px;
  padding-left: 14px;
  line-height: 38px;
  border-bottom: 1px solid #eee;
}
.adressBox div:hover {
  background: #e1e1e1;
  cursor: pointer;
}
.confirmBtn {
  position: absolute;
  bottom: -12px;
  right: 0;
}
.check {
  font-size: 18px;
  font-weight: 600;
  color: #409eff;
}
</style>