vue 3 项目中使用百度地图 bmaplib 等开源库

在 Vue 3 项目中使用百度地图 BMapLib，需要通过以下步骤：

1. 引入百度地图 API

   在 HTML 文件中引入百度地图 API。需要注意的是，要引入 BMapLib 相关的文件，需要在百度地图 API 引入之后再引入。例如：

   <script src="https://map.baidu.com/api?v=3.0"></script>
   <script src="path/to/BMapLib.js"></script>

2. 异步加载其他文件

   立即学习“前端免费学习笔记（深入）”；

   对于其他非 BMapLib 的文件，例如自定义的地图初始化、扎点等方法，可以异步加载。例如：

   

   vue-composition-api-best-practices

   Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

   下载

   // 创建一个 script 元素
   const script = document.createElement('script');
   // 设置脚本的 async 属性
   script.async = true;
   // 设置脚本的 src 属性
   script.src = "path/to/custom-script.js";
   // 将脚本添加到 body 元素中
   document.body.appendChild(script);

3. 监听脚本加载

   为了确保在百度地图 API 加载完成之后再加载其他文件，可以监听百度地图 API 脚本的 onload 事件。例如：

   const baiduMapScript = document.querySelector('script[src="https://map.baidu.com/api?v=3.0"]');
   baiduMapScript.onload = function() {
     // 百度地图 API 加载完成
     // 加载其他文件
   };

4. 修改自定义方法

   如果自定义的地图方法是在 HTML 结构中调用的，那么在将其导入 Vue 项目后，需要对其进行修改，将其转换为一个可导入的模块。例如，可以将以下代码放入单独的文件中：

   export function customMapMethod() {
     // 地图方法的实现
   }

   然后在 Vue 组件中导入和使用该方法：

   import { customMapMethod } from 'path/to/custom-script.js';
   export default {
     methods: {
       initMap() {
         customMapMethod();
       },
     },
   };

通过以上步骤，可以在 Vue 3 项目中使用百度地图 BMapLib 等开源库。