vue2腾讯地图自定义markers图片

<template>
    <el-dialog title="添加商户集群" :visible="show" :before-close="closeDialog" width="80%">
        <el-row :gutter="24">
            <el-col :span="12">
                <el-form :model="queryParams" ref="queryForm" size="small">
                    <el-form-item label="集群名称">
                        <el-input v-model="queryParams.name" placeholder="请输入集群名称"></el-input>
                    </el-form-item>
                    <el-form-item label="选择商户">
                        <el-button type="text" icon="el-icon-plus" @click="choose">选择</el-button>
                        <el-table :data="choosedData" height="400px">
                            <el-table-column prop="name" label="帖子标题" width="180">
                            </el-table-column>
                            <el-table-column prop="address" label="地址">
                            </el-table-column>
                            <el-table-column fixed="right" label="操作" width="120">
                                <template slot-scope="scope">
                                    <el-button @click.native.prevent="deleteRow(scope.$index, choosedData)" type="text" size="small">
                                        移除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="12">
                <div id="mapContainer"></div>
            </el-col>
        </el-row>
        <ChooseMechant :show.sync="chooseDialog" @refresh_list="refreshList"></ChooseMechant>
    </el-dialog>
</template>
<script>
import ChooseMechant from './chooseMechant.vue'
export default {
    name: 'addMerchant',
    components: {
        ChooseMechant
    },
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        show(val) {
            if (val) {
                this.$nextTick(() => {
                    this.initMap()
                })
            } else {
                // 关闭弹窗的时候销毁地图 不然会导致重复渲染多个地图
                if (this.map) {
                    this.map.destroy()
                }
            }
        }
    },
    data() {
        return {
            map: null,//地图实例
            queryParams: {
                name: ''
            },
            chooseDialog: false,
            choosedData: [],
            markers: []
        }
    },
    mounted() { },
    methods: {
        closeDialog() {
            this.$emit("update:show", false);
        },
        initMap() {
            this.map = new TMap.Map(document.getElementById('mapContainer'), {
                center: [30.221391, 120.264777],
                zoom: 14,
                showControl: false
            });
            this.geocoder = new TMap.service.Geocoder()
        },
        choose() {
            this.chooseDialog = true
        },
        refreshList(e) {
            // 去重
            const concatArray = [...this.choosedData, ...e]
            const map = new Map();
            const newArr = concatArray.filter(v => !map.has(v.id) && map.set(v.id, v));
            this.choosedData = newArr
            console.log(this.choosedData, 'this.choosedData')
            this.handlerMarker()
        },
        deleteRow(index, rows) {
            rows.splice(index, 1);
            // 先清空所有的markers
            this.markers.forEach(m => {
                m.marker.setMap(null)
            });
            this.handlerMarker()
        },
        handlerMarker() {
            if (this.choosedData.length == 0) return
            const markersStyle = {
                'width': 50, // 宽度
                'height': 50, // 高度
                'anchor': { x: 17, y: 23 }, // 标注点图片的锚点位置
                'src': 'https://mapapi.qq.com/web/lbs/visualizationApi/demo/img/small.png', // 标注点图片url或base64地址
                'color': '#fa2d04', // 标注点文本颜色
                'size': 16, // 标注点文本文字大小
                'direction': 'bottom', // 标注点文本文字相对于标注点图片的方位
                'offset': { x: 0, y: 8 }, // 标注点文本文字基于direction方位的偏移属性
                'strokeColor': '#fff', // 标注点文本描边颜色
                'strokeWidth': 2, // 标注点文本描边宽度
            }
            var MkStyles = {}
            this.choosedData.forEach(item => {
                MkStyles[item.id] = new TMap.MarkerStyle({
                    ...markersStyle,
                    'src': item.avatar || 'https://mapapi.qq.com/web/lbs/visualizationApi/demo/img/small.png'
                })
            })
            this.geometries = this.choosedData.map(item => {
                return {
                    styleId: item.id,
                    position: new TMap.LatLng(item.lat, item.lng),
                    content: item.address
                }
            })
            let marker = null
            marker = new TMap.MultiMarker({
                map: this.map, // 显示Marker图层的底图
                styles: MkStyles,
                enableCollision: true, // 开启碰撞
                geometries: this.geometries
            });
            this.markers.push({ marker });
            this.showMarker()
        },
        showMarker() {
            const bounds = new TMap.LatLngBounds();
            //判断标注点是否在范围内
            this.geometries.forEach(function (item) {
                //若坐标点不在范围内，扩大bounds范围
                if (bounds.isEmpty() || !bounds.contains(item.position)) {
                    bounds.extend(item.position);
                }
            })
            //设置地图可视范围
            this.map.fitBounds(bounds, {
                padding: 100 // 自适应边距
            });
        }
    }
}
</script>
<style scoped>
#mapContainer {
  width: 100%;
  height: 500px;
}
</style>