vue3使用百度BMapLib

Vue3中使用百度BMapLib（百度地图JavaScript API）通常涉及以下几个步骤：

1. **安装依赖**：
首先，你需要在项目中安装`@bmap/api`这个npm包，用于获取百度地图API。在`package.json`文件中添加：

   npm install @bmap/api

2. **引入并注册组件**：
在Vue组件中，通过导入`@bmap/api`并在原型上注册一个方法，以便在模板内创建地图实例：

   import BMap from '@bmap/api';

   export default {
     setup() {
       const initMap = async () => {
         // 实例化地图
         const map = new BMap.Map('containerId', { center: [116.404, 39.915], zoom: 12 });
         // 其他地图配置...
       };
       return { initMap };
     },
   };

确保在HTML模板中有一个ID为`containerId`的元素，例如`<div id="containerId"></div>`。

3. **使用地图功能**：
在模板中可以使用`v-once`指令包裹地图容器，并调用`initMap`方法：

   <template v-once>
     <div ref="map" id="containerId"></div>
   </template>

   <!-- 在methods里调用 -->
   <script>
     onMounted(() => this.initMap());
   </script>

这样，当地图加载完成后，你可以进一步添加标记、路线规划等功能。