<template>
    <div id="container"></div>
</template>
<script>
import { mapState } from 'vuex';
import Marker from '../utils/Marker';
export default {
    name: '',
    data() {
        return {
            map: null,
        };
    },
    computed: {
        ...mapState(['userInfo']),
    },
    mounted() {
        if (this.$route.query.location) {
            let location = this.$route.query.location.split(',');
            this.initMap(location[0], location[1]);
        }
    },
    methods: {
        initMap(lat, lng) {
            // 初始化地图
            const map = new TMap.Map('container', {
                zoom: 12, // 设置地图缩放级别
                center: new TMap.LatLng(lat, lng), // 设置地图中心点坐标
                doubleClickZoom: false,
            });

            let donutList = [
                new Marker({
                    map,
                    position: new TMap.LatLng(
                        39.96030543872138,
                        116.25809083213608,
                    ),
                    type: 'user',
                }),
                new Marker({
                    map,
                    position: new TMap.LatLng(
                        39.9986945980902,
                        116.33598362780685,
                    ),
                    type: 'merchat',
                }),
                new Marker({
                    map,
                    position: new TMap.LatLng(
                        40.02906301748584,
                        116.25499991104516,
                    ),
                    type: 'rider',
                }),
            ];

            donutList.forEach((donut, index) => {
                donut.on('click', () => {
                    console.log(
                        `第${index}个环形图被点击，位置为${donut.position}`,
                    );
                });
            });
        },
    },
};
</script>
<style lang="less" scoped>
#container {
    width: 100%;
    height: 100vh;
}
</style>
