UniApp 是一款基于 Vue.js 的跨平台应用开发框架，支持快速构建原生 App。在 UniApp 中使用百度地图，开发者可以利用官方提供的地图组件和 API 来集成地图功能。以下是使用百度地图在 UniApp App 端的基本步骤： 1. **安装插件**：在 UniApp 项目中，首先需要安装`@vant/baidu-map` 或 `uni-map` 这样的百度地图组件库。在`npm`或`yarn`中运行相应的安装命令。 ```bash // 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`或需要地图功能的页面中注册组件，并初始化地图实例。 ```javascript 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. **添加地图视图**：在页面模板中使用地图组件，并根据需要添加标记、路线等功能。 ```html <baidu-map :ref="mapRef" :map="map"></baidu-map> <script setup> const mapRef = ref(null); onMounted(() => { mapRef.value.setMap(map); }); </script> ``` 4. **地图事件监听**：使用`addEventListener`监听地图的各种事件，如点击、拖拽等。 ```javascript map.addEventListener('click', (e) => { console.log('点击位置:', e.point); }); ```
