百度地图拾取坐标集vue-baidu-map

### 集成百度地图并实现坐标拾取功能 要在 Vue 项目中使用 `vue-baidu-map` 插件来实现百度地图的坐标拾取功能，可以按照以下方法操作。 #### 安装依赖 首先需要安装插件以及其必要的依赖项。可以通过 npm 或 yarn 来完成安装： ```bash npm install vue-baidu-map --save ``` 或者 ```bash yarn add vue-baidu-map ``` 此部分的操作说明可参考官方文档[^2]。 --- #### 初始化配置 为了能够正常使用百度地图服务，需先前往 **百度地图开放平台** 创建应用并获取 API 密钥。具体步骤如下： 1. 登录 [百度地图开放平台](http://lbsyun.baidu.com/) 并创建一个新的应用； 2. 获取对应的 AK (Access Key)，用于后续初始化 BMap 组件。 上述过程已在参考资料中提及[^1]。 在项目的入口文件（通常是 main.js 中），引入并注册该插件： ```javascript import Vue from 'vue'; import BaiduMap from 'vue-baidu-map'; Vue.use(BaiduMap, { ak: 'your_api_key_here' // 替换为实际申请到的AK值 }); ``` 此处需要注意的是，API 密钥的安全管理非常重要，请勿将其暴露于公共环境中。 --- #### 地图组件开发 接下来，在目标页面定义一个基于 `<baidu-map>` 的容器，并通过事件监听器捕获用户的交互行为以提取地理坐标数据。 以下是完整的代码示例： ```html <template> <div id="map-container"> <!-- 百度地图 --> <baidu-map class="map" :center="centerPoint" :zoom="zoomLevel" @click="handleMapClick"> <!-- 添加标记 --> <bm-marker v-if="markerPosition" :position="{lng: markerPosition.lng, lat: markerPosition.lat}" /> <!-- 可选：显示信息窗口 --> <bm-info-window v-if="infoWindowVisible" :position="{lng: markerPosition.lng, lat: markerPosition.lat}"> {{ infoContent }} </bm-info-window> </baidu-map> <!-- 坐标展示区域 --> <p>当前选取位置：</p> <textarea readonly>{{ selectedCoordinates }}</textarea> <!-- 清除按钮 --> <button @click="clearSelection">清除</button> </div> </template> <script> export default { data() { return { centerPoint: { lng: 116.404, lat: 39.915 }, // 初始中心点 zoomLevel: 15, // 缩放级别 markerPosition: null, // 当前标记的位置 infoWindowVisible: false, // 是否显示信息框 infoContent: '', // 显示的信息内容 selectedCoordinates: '' // 用户选择的坐标字符串形式 }; }, methods: { handleMapClick(e) { const point = e.point; this.markerPosition = { lng: point.lng, lat: point.lat }; // 更新标记位置 this.selectedCoordinates = `${point.lng}, ${point.lat}`; // 记录坐标 // 打开信息窗口 this.infoContent = `您选择了纬度(${point.lat}) 和经度(${point.lng})`; this.infoWindowVisible = true; console.log('用户点击了:', point); }, clearSelection() { this.markerPosition = null; // 移除标记 this.infoWindowVisible = false; // 关闭信息窗口 this.selectedCoordinates = ''; // 清空记录 } } }; </script> <style scoped> .map { width: 100%; height: 500px; } textarea { margin-top: 1em; padding: .5em; border-radius: 4px; } </style> ``` 以上代码实现了基本的功能需求，包括但不限于设置初始视图范围、响应鼠标单击事件采集地理位置、动态更新界面控件等内容[^3]。 --- #### 注意事项 - 如果希望支持移动端设备上的触屏拖拽，则可能还需要额外调整样式或逻辑。 - 对于复杂的业务场景，比如多点路径规划或是覆盖物绘制等功能扩展时，建议查阅更详细的 SDK 文档资料作为补充学习资源。 ---