<template>
    <div class="mapBox">
        <div ref="mapContainer" id="allmap"></div>
    </div>
</template>
  
<script setup>
import { ref, onMounted } from 'vue';

const mapContainer = ref(null);
let map = null;

onMounted(async () => {
    // 初始化地图
    map = new BMapGL.Map(mapContainer.value);
    map.centerAndZoom(
        new BMapGL.Point(109.929285, 27.392879), 15); // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);
    map.setMapStyleV2({
        styleId: '62ce43ad2a1362c23e612b783d7406e7'
    });
    // 导入JSON文件
    try {
        const response = await axios.get('./data.json'); // 替换为你的JSON文件路径
        const data = response.data;
        console.log(111,data)

        // 解析JSON数据并创建地图覆盖物（例如多边形）
        if (data && data.points) { // 假设你的JSON文件包含一个名为points的数组
            const points = data.points.map(([lng, lat]) => new BMap.Point(lng, lat));
            const polygon = new BMap.Polygon(points, { strokeWeight: 2, strokeColor: '#ff0000', fillColor: '#f5deb3' });
            map.addOverlay(polygon); // 将多边形添加到地图上
        }
    } catch (error) {
        console.error('Error loading JSON data:', error);
    }
});

// 如果需要的话，在beforeUnmount中清理资源
import { onBeforeUnmount } from 'vue';
onBeforeUnmount(() => {
    if (map) {
        // 清理地图资源
        map.dispose();
        map = null;
    }
});
</script>
  
<style scoped>
/* 样式 */

.mapBox {
    width: 100%;
    height: 100%;
}

#allmap {
    /* // 注意给dom宽高，不然地图不出来 */
    width: 100%;
    height: 100%;
    margin: auto;
    padding: 0;
}
</style>