uniapp app端 使用百度地图

UniApp 是一款基于 Vue.js 的跨平台应用开发框架，支持快速构建原生 App。在 UniApp 中使用百度地图，开发者可以利用官方提供的地图组件和 API 来集成地图功能。以下是使用百度地图在 UniApp App 端的基本步骤：

1. **安装插件**：在 UniApp 项目中，首先需要安装`@vant/baidu-map` 或 `uni-map` 这样的百度地图组件库。在`npm`或`yarn`中运行相应的安装命令。

   // npm
   npm install @vant/baidu-map --save
   // 或者
   yarn add @vant/baidu-map

   // 或者在Vite配置中引入
   import BaiduMap from '@vant/baidu-map';
   definePlugin('BaiduMap', { components: [BaiduMap] });

2. **注册并初始化**：在 App 的`main.js`或需要地图功能的页面中注册组件，并初始化地图实例。

   import BaiduMap from '@/components/BaiduMap.vue'; // 如果是 Vant 组件
   import { BaiduMap } from '@vant/baidu-map'; // 如果是 vant-baidu-map

   const map = new BaiduMap({
     // 配置参数，如 ak（百度地图密钥）、中心点坐标、初始缩放级别等
     ak: 'your_baidu_map_key',
     center: [{ longitude: 116.404, latitude: 39.915 }],
     zoom: 12,
   });

3. **添加地图视图**：在页面模板中使用地图组件，并根据需要添加标记、路线等功能。

   <baidu-map :ref="mapRef" :map="map"></baidu-map>
   <script setup>
     const mapRef = ref(null);
     onMounted(() => {
       mapRef.value.setMap(map);
     });
   </script>

4. **地图事件监听**：使用`addEventListener`监听地图的各种事件，如点击、拖拽等。

   map.addEventListener('click', (e) => {
     console.log('点击位置:', e.point);
   });