高德地图的使用

<template>
    <div class="mapwrap">
        <div id="Map"></div>
        <div class="select_wrap">
            <div class="tabwrop">
                <el-radio-group v-model="tabIndex" size="mini">
                    <el-radio-button :value="item.id" :label="item.name" v-for="(item, i) in tablist" :key="i"
                        @click="setStyle(i)"></el-radio-button>
                </el-radio-group>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    components: {},
    props: {

    },
    data() {
        return {
            map: null,
            tabIndex: "全部",

            tablist: [
                {
                    name: "全部",
                    id: 1,
                },
                {
                    name: "正常",
                    id: 2,
                },
                {
                    name: "异常",
                    id: 3,
                },
            ],
            center: '',
            marker: '',
        };
    },
    methods: {
        intMap() {
            this.center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
            let map = new TMap.Map("Map", {
                center: this.center
            });
            this.marker = new TMap.MultiMarker({
                id: 'marker-layer',
                map: map,
                styles: {
                    "marker": new TMap.MarkerStyle({
                        "width": 25,
                        "height": 35,
                        "anchor": { x: 16, y: 32 },
                        "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
                    })
                },
                geometries: [{
                    "id": 'demo',
                    "styleId": 'marker',
                    "position": new TMap.LatLng(39.984104, 116.307503),
                    "properties": {
                        "title": "marker"
                    }
                }]
            });

        },
        setStyle() {
            //更换marker样式方法
            this.marker.setStyles({
                "marker": new TMap.MarkerStyle({
                    "width": 70,
                    "height": 70,
                    "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerNew.png',
                    "opacity": 0.5
                })
            })
        },
    },
    mounted() {
        this.intMap()
    },
};
</script>
<style lang="less" scoped>
.mapwrap {
    // padding: 10px 0 10px 10px;
    box-sizing: border-box;
    height: calc(100%);
    position: relative;

    #Map {
        height: 100%;
        width: 100%;
        position: absolute;
    }
}

.select_wrap {
    width: 200px;
    height: 40px;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1999;
    display: flex;

    .tabwrop {
        width: 200px;
        margin-left: 10px;
        color: #fff;
    }
}
</style>