当项目中多个页面使用地图组件时，简易写法（亲测有效）vue3 + 地图

建立一个xxx.js   ,在其中书写

import { onBeforeUnmount, onMounted, reactive, toRefs,toRaw } from 'vue';
export default function (level) {
    let data = reactive({
        myMap: null,
        center: [120.383134,36.075261],
        initCenter: null,//中心点
        level:8,//地图缩放级别
    })
    function initMap() {
        data.myMap = new BMap.Map('map');
        data.initCenter = new BMap.Point(data.center[0], data.center[1]);
        data.myMap.centerAndZoom(data.initCenter, data.level);
        data.myMap.enableScrollWheelZoom(true);
    }
    
    onMounted(() => {
        if(level){
            data.level = level
        }
        initMap();
    })
    onBeforeUnmount(() => {
        // console.log('LLLLLLLLLLLLL',data.myMap)
        // data.myMap.destroy()
        // data.myMap = null
    })

    return {
        ...toRefs(data),
    }
}

 之后，在需要展示地图时引入即可，根据level不同，显示相同位置的不同展示方法,也可以加几个参数使中心店发生变化