最近在做一个项目，技术采用的是Vue.js套餐，有个百度地图的需求，当时，大脑宕机，立马去引入百度地图API，当时想到两种方法，一种是在index.html中全局引入js，此法吾不喜，就采用了第二种异步加载jsonp的方式，细节无关本文，暂且不提。噼里啪啦~噼里啪啦~ 代码一气呵成，本地测试完，立马上服务器测试，what ？？？ 什么鬼 ？ 进入界面后，我的地图呢？？地图呢？？回看代码，代码中有一行window.onload = loadScript，呃~呃~呃~，vue中界面跳转不会触发这个， 欧德科 ？？？ 坑爹啊~ 有木有？？然后立马百度进行搜索，此时眼前一亮，嘻嘻嘻~，我看到了什么？？vue-baidu-map，然后爱酱去官网看文档，看完第一反应莫名其妙~~，为了那些跟我一样不认真看文档，粗心大意，脑袋容易宕机的码农们 ，特记录下这个插件的使用方法。

　　

　　

　　安装：

　　　这里只介绍npm安装方式

$ npm install vue-baidu-map --save

 

　　注册：

　　　注册的方式有两种 ： 全局注册 & 局部注册 ，各位可以根据自己的需求来选择，我个人采用的是局部注册，按需加载。个人注册了一个公共的MapView.vue组件来实现地图的功能，存放在项目组件库components/common下。

　　　官方文档描述1：局部注册的 BaiduMap 组件必须声明 ak 属性。

　　　　　注: 这个ak指的是你的百度地图开放平台获取到的秘钥

　　　官方文档描述2：所有的独立组件均存放在 vue-baidu-map/components 文件夹下，按需引用即可。

　　　　　刚开始，我就是被这句话给迷惑了，由于没认真看文档，又看到代码，傻傻的去组件库components中新建了一个vue-baidu-map文件夹，然后去注册了一个Map.vue的组件。

　　　　　No~No~No~ 不是这样的。注意：这里指的是vue-baid-map文件夹下的components组件库，而不是我们项目中自己创建的components组件库，不要跟我一样犯傻。

 

　　在安装完vue-baidu-map后，在node_modules中会有一个vue-baidu-map文件夹，我们现在来找到它，它的结构是这样的：

　　　　vue-baidu-map

　　　　　　|__ .github

　　　　　　|__  build

　　　　　　|__ components

　　　　　　|__ test

　　　　　　|__ types

　　看到了吗？ 这里有个components组件库，而官方描述中叫我们引入的是这个文件下的独立组件。

 

　　实现：

　　　　现在我们来看看代码。

　　　　在个人注册的组件MapView.vue中来实现地图功能，

 

　　如你需要使用其他的组件，只需要根据官方提供的控件名，通过 import引入组件，然后在components·中指定组件模板，在template中使用即可。

　　例如：现在需要使用定位控件，官方提供的控件名是：BmGeolocation，接下来直接上代码：