vue3.0 项目中该如何使用百度地图BMapLib等开源库？如何导入引用呢？

Question

如图，之前html+js写法， 百度地图js api 、开源库TrafficControl.js/LuShu.js,以及自己封装的地图初始化、扎点等方法js等都是直接srcipt标签引入的，如下图
引用如下：

调用如下：

---

现在初次使用vue3.0开发百度地图相关功能，网上了解了现有的vue-baidu-map插件是基于vue2.x版本的，无法npm install使用，所以vue3.0引用百度地图的话只能在index.html界面标签引入嘛？类似下图：

但是这种方式的话，所有组件都会引用这些相关js文件，所以网上检索时又了解了异步加载js的方式引用百度地图api，如下图：


使用该方式后，百度地图加载初始化没问题，但是像TrafficControl.js/LuShu.js以及自定义地图扎点等方法本地js该如何导入呢？直接写在index.html文件导入会提示BMap is undefined，写在异步加载里非http路径动态插入后路径识别不了。
求教，有没有什么好的解决方法，在引入百度地图api后，还可以引入TrafficControl.js/LuShu.js以及自定义地图扎点等方法本地js，
另外，这些原先在html结构中可以正常调取的自定义方法之后在vue项目中这些js定义的方法要使用的话是否要做修改，比如export之类的....求各位大佬指教，谢谢。

Answer 1

等了一天这题也没人回答，虽然你邀请了我，但是我也没啥好办法，总得来说就是期期望异步加载百度地图，其他script文件在百度地图加载完之后按顺序加载，不知道我理解的对不对

如果是这样，可以监听下百度地图 script onload 事件，监听到加载完毕再插入TrafficControl.js/LuShu.js 设置 async = false 会阻塞后面插入的文件，使其按顺序加载

Answer 2

可以使用remoteLoad.js局部加载，进入页面create,离开页面销毁。
参考链接

Answer 3

1. 首先，我不清楚 vue-baidu-map 有没有用到什么奇怪的做法，很多时候，vue2 的组件是可以在 vue3 环境里低成本使用的。
2. 其次，开源世界最大的好处，就是你想用的开源产品不完全合愿，fork 过来改改

3. 使用 <script> 引用的 js，都注册在全局，你只要保证他们都加载成功，就可以在不同组件中使用，不存在这种情况

   所有组件都会引用这些相关js文件，

   也不存在

   BMap is undefined

4. 至于怎么加载，要看这些文件是怎么打包，怎么导出
5. 最后，是否要重构成 ESM（export 就是 ESM 中的方法），要看你的需求和排期