vue3中引入百度地图的小问题

vue项目中利用vue-charts结合百度地图可以实现如下的效果

但是可能会出现类似如下错误

分享下自己的解决方法

引入

• 标签引入 直接在Vue项目的index.html引入script标签即可,如下

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的ak"></script>

这样引入的缺点在于:

1. 打包过程可能会出现问题

例如vite中就会有 can't be bundled without type="module" 的问题

2. 地图可能只在一两个页面被使用 但是'全局'引入了

所以可以动态引入 即需要的时候再引入

• 动态引入 动态引入的原理就是动态的创建一个script标签 插入head 自动下载

新建utils/script.ts

export const initBMapScript = () => {
  return new Promise((resolve, reject) => {
    // Map加载后会挂载到window上
    if ((window as any).BMap) {
      return resolve("BMap has been loaded");
    } else {
       // 加载成功的回调 src中定义 类似Jsonp
      (window as any).onBMapCallback = function () {
        resolve("baidu map script init success");
      };
      
      // 插入script标签
      let script = document.createElement("script");
      script.type = "text/javascript";
      script.src = BAIDU_MAP_SRC + "&callback=onBMapCallback";
      script.onerror = () => {
        reject("baidu map script init failed");
      };
      document.head.appendChild(script);
    }
  });
};

组件中使用

<template>
    <v-chart v-if="option" :option="option"></v-chart>
</template>

<script lang='ts' setup>
...
let option = ref<any>()
onMounted(() => {
    initBMapScript().then(() => {
        // 图表option初始化
        option.value = mapChartOpts
    }).catch((err) => {
        console.log('err', err);
    })
})
</script>