我正在参加「掘金·启航计划」在开发项目的时候，发现需要获取经纬度，由于这个项目是用vue写的，最后决定使用vue-baidu-map来快速获取经纬度基于 Vue.js 封装的百度地图组件，运行流畅，代码简单易懂，几乎包含了百度地图官方的所有API，文档地址:https://dafrok.github.io/vue-baidu-map/#/zh/start/installation ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c5d90ac1f2764e00b929efba57c3b9fc~tplv-k3u1fbpfcp-watermark.image?) # 1.申请百度地图密钥搜索'百度地图开放平台'，选择头部导航栏开发文档里的JavaScript API ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0c87403aeae0413db71815542a2085b9~tplv-k3u1fbpfcp-watermark.image?) 然后点击申请密钥 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/53038a90d89546b59a09b422734cd6f6~tplv-k3u1fbpfcp-watermark.image?) # 2.安装vue-baidu-map 终端运行 ``` npm install vue-baidu-map --save ``` main.js里全局注册 ``` import Vue from 'vue' import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { // ak 是在百度地图开发者平台申请的密钥详见 http://lbsyun.baidu.com/apiconsole/key */ ak: 'YOUR_APP_KEY' }) ``` 引入组件,初始化地图，开启鼠标滚轮控制地图缩放 ``` ``` 一个简单的地图就出来了 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2c4a83351c164c91b3a3c41b38de0f62~tplv-k3u1fbpfcp-watermark.image?) # 3.获取经纬度 3.1 为地图添加点击事件,获取经纬度 ``` ``` 3.2 添加BmInfoWindow信息窗口组件和BmMarker标注,点击地图时弹出 ``` ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d5f8e579adac44bfa4d03cc3f90e147b~tplv-k3u1fbpfcp-watermark.image?) 3.3 添加BmAutoComplete组件，输入地址自动补全 ``` ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0dc67bd4b3ce465c9cf996958844e3cf~tplv-k3u1fbpfcp-watermark.image?) 3.4 最后点击搜索按钮地图跳转到搜索位置并打开信息窗口和标注 ``` ``` 最后放上全部代码 ``` ``` # 最终实现效果 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2c366a31873b452fa9e32f661a1774ca~tplv-k3u1fbpfcp-watermark.image?)