今天给小伙伴们推荐一款超高标准的 Vue2.x 地图选择器组件VueBaiduMap。
![44d8c077c253b95931701eaa03726e28.png](https://img-blog.csdnimg.cn/img_convert/44d8c077c253b95931701eaa03726e28.png)
vue-baidu-map 一个基于Vue.js封装的高水平百度地图组件。全中英文文档,丰富的API示例,支持引入百度地图扩展包。
![8b274d083bf3c746a59fac4ba922a11e.gif](https://img-blog.csdnimg.cn/img_convert/8b274d083bf3c746a59fac4ba922a11e.gif)
![fc395f604ba240ab9e3aa5f76b4f8737.gif](https://img-blog.csdnimg.cn/img_convert/fc395f604ba240ab9e3aa5f76b4f8737.gif)
安装
$ npm i vue-baidu-map -S
引入
# 全局引入:在main.js中注册组件import Vue from 'vue'import VueBaiduMap from 'vue-baidu-map'Vue.use(VueBaiduMap, { // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ ak: 'MAP_APP_KEY'})# 按需引入:局部注册的 BaiduMap 组件必须声明 ak 属性
使用插件
提供各种丰富的示例及API调用
![145e7f57fe84a385e88a76f680ae3232.png](https://img-blog.csdnimg.cn/img_convert/145e7f57fe84a385e88a76f680ae3232.png)
![4b505cee0e7278b6aaec560e12bf5242.png](https://img-blog.csdnimg.cn/img_convert/4b505cee0e7278b6aaec560e12bf5242.png)
![04cd8c76f019d4c347e17759636204fe.png](https://img-blog.csdnimg.cn/img_convert/04cd8c76f019d4c347e17759636204fe.png)
![0fdb425b08eaf27e1e1a5dcb6ef0074e.png](https://img-blog.csdnimg.cn/img_convert/0fdb425b08eaf27e1e1a5dcb6ef0074e.png)
最后附上文档及仓库地址
# 文档/示例地址https://dafrok.github.io/vue-baidu-map/# github地址https://github.com/Dafrok/vue-baidu-map
ok,就介绍到这里。大家如果有其他Vue地图组件,欢迎一起交流讨论。若是对你的学习有帮助,记得留个印记哈!