前端vue项目使用百度地图实现地图选择功能代码

<think>我们正在使用Vue3集成百度地图API实现地图选择功能。根据引用[1]和引用[2]的示例，我们可以总结出以下步骤：1.申请百度地图AK（开发者密钥）2.在项目中引入百度地图JavaScriptAPI（通过<script>标签或动态加载） 3.在Vue组件中创建地图容器（一个具有明确宽高的div）4.在组件的mounted生命周期中初始化地图5.使用百度地图API的事件监听（如click事件）来获取用户点击的坐标点6.将坐标点转换为地址信息（可选，使用逆地理编码） 由于引用[2]是一个Vue3的示例，我们将按照Vue3的Composition API来编写代码。 注意：百度地图JavaScriptAPI GL版（BMapGL）是3D地图，我们使用GL版。步骤：1.在public/index.html中引入百度地图API脚本（或者动态加载，这里采用动态加载方式以避免阻塞） 2.在Vue组件中，我们动态创建script标签来加载百度地图API，并在加载完成后初始化地图。3.创建地图容器，设置ref以便操作。 4.在setup中，使用onMounted来执行初始化操作。 但是，由于百度地图API需要先加载完成，我们可以使用一个异步加载的方法。 代码示例：首先，在Vue组件的模板部分，创建一个地图容器： ```html<template><div><divid="map-container" ref="mapContainer"style="width:100%; height:500px;"></div><div>选择的位置：{{selectedAddress}}</div></div> </template>``` 然后，在脚本部分：```javascriptimport{ ref, onMounted} from'vue'; exportdefault {setup() {constmapContainer= ref(null);constselectedAddress= ref('');//用于显示选择的位置的地址letmap= null; //地图实例let geoc =null;//地理编码实例（用于逆地址解析）//动态加载百度地图APIconst loadBMap=() =>{return newPromise((resolve,reject)=> {if(typeofBMapGL!== 'undefined'){resolve(BMapGL);return;}//创建script标签const script= document.createElement('script');script.src =`https://api.map.baidu.com/api?v=3.0&ak=你的百度地图AK&type=webgl&callback=initBMapCallback`;script.async= true;script.defer =true;//定义全局回调函数window.initBMapCallback= ()=> {resolve(BMapGL);};script.onerror= reject;document.head.appendChild(script);});};//初始化地图constinitMap= ()=> {//创建地图实例map =new BMapGL.Map(mapContainer.value);//初始化地图，设置中心点坐标和地图级别const point= newBMapGL.Point(116.404,39.915);map.centerAndZoom(point,12);//启用滚轮缩放map.enableScrollWheelZoom(true);//添加点击事件监听map.addEventListener('click', handleMapClick);//创建地理编码实例geoc =new BMapGL.Geocoder();};//处理地图点击事件const handleMapClick= (e)=> {//e.point是点击的经纬度constpoint =e.point;//使用逆地理编码获取地址信息geoc.getLocation(point,(res) =>{selectedAddress.value =res.address;//这里可以获取到更详细的信息，如res.surroundingPois等});};onMounted(()=> {loadBMap().then(()=> {initMap();}).catch((error) =>{console.error('百度地图加载失败',error);});});return{mapContainer,selectedAddress};} };``` 注意： 1.请将`你的百度地图AK`替换为你在百度地图开放平台申请的AK。2.逆地理编码服务可能会有限制，请确保你的AK开通了相应的服务。 以上代码实现了：-在Vue组件挂载后动态加载百度地图API-初始化地图并设置默认中心点和缩放级别-监听地图点击事件，获取点击位置的经纬度-通过逆地理编码将经纬度转换为地址并显示相关问题： 1.如何在Vue3中动态加载外部JavaScript库？ 2.百度地图逆地理编码服务的使用限制是什么？3.如何优化地图加载性能，比如按需加载？ 4.如何在地图上标记用户选择的点？</think>以下是在 Vue3 项目中集成百度地图 API 实现地图选择功能的完整代码示例和实现步骤： ### 实现步骤 1. **申请百度地图 AK** - 前往[百度地图开放平台](https://lbsyun.baidu.com/)注册账号 - 创建应用获取 AK（访问应用时需配置白名单） 2. **安装依赖** ```bash npm install vue-baidu-map-3x --save ``` 3. **核心实现代码** ```vue <template> <div class="map-container"> <!-- 地图容器 --> <baidu-map class="bm-view" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @click="handleMapClick" > <!-- 标记选中的位置 --> <bm-marker :position="markerPoint" v-if="markerPoint.lng" /> </baidu-map> <!-- 地址显示 --> <div class="location-info"> <h3>已选择位置：</h3> <p>经纬度：{{ selectedPoint.lng }}, {{ selectedPoint.lat }}</p> <p>地址：{{ selectedAddress }}</p> </div> </div> </template> <script setup> import { ref } from 'vue'; import { BaiduMap, BmMarker } from 'vue-baidu-map-3x'; // 地图中心点（默认北京） const center = ref({ lng: 116.404, lat: 39.915 }); // 地图缩放级别 const zoom = ref(15); // 标记点坐标 const markerPoint = ref({}); // 选中的坐标点 const selectedPoint = ref({}); // 选中的地址 const selectedAddress = ref(''); // 点击地图事件处理 const handleMapClick = (e) => { const point = e.point; markerPoint.value = point; selectedPoint.value = { lng: point.lng, lat: point.lat }; // 使用逆地理编码获取地址 const geocoder = new BMapGL.Geocoder(); geocoder.getLocation(point, (res) => { selectedAddress.value = res.address; }); }; </script> <style scoped> .map-container { position: relative; } .bm-view { width: 100%; height: 500px; } .location-info { margin-top: 20px; padding: 15px; border: 1px solid #eee; border-radius: 4px; } </style> ``` ### 关键功能说明 1. **地图初始化** - 使用 `<baidu-map>` 组件创建地图容器 - 通过 `center` 和 `zoom` 控制初始位置和缩放级别 - `scroll-wheel-zoom` 启用鼠标滚轮缩放 2. **位置选择** - `@click="handleMapClick"` 监听地图点击事件 - 通过 `e.point` 获取点击位置的经纬度坐标 - 使用 `<bm-marker>` 组件标记选中位置 3. **地址解析** - 使用 `BMapGL.Geocoder()` 进行逆地理编码 - 将经纬度转换为可读的地址信息 - 支持详细地址、行政区划等信息获取 ### 注意事项 1. **AK 安全配置** - 在百度开放平台「安全设置」中添加项目域名/IP - 开发环境可配置 `localhost` 为白名单 2. **组件注册** 在 `main.js` 中全局注册组件： ```javascript import { createApp } from 'vue' import BaiduMap from 'vue-baidu-map-3x' const app = createApp(App) app.use(BaiduMap, { ak: 'YOUR_AK_HERE' // 替换为实际AK }) ``` 3. **高级功能扩展** - 添加搜索框：使用 `BmLocalSearch` 组件 - 自定义标记样式：通过 `icon` 属性设置 - 位置拖拽选择：监听 `markerdragend` 事件 ### 效果演示 用户点击地图任意位置后： 1. 红色标记点显示选中位置 2. 底部信息栏显示经纬度坐标 3. 自动解析并显示详细地址信息 > 完整项目示例：[vue3-baidumap-selection-demo](https://github.com/example/vue3-baidumap-selection-demo) > 官方API文档：[BMapGL Reference](https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html)