VUE项目中百度地图的灵活使用

所谓的灵活使用，简单说就是结合 vue-Baidu-Map和原始的JavaScript的api混合使用，并对跨组件之间地图操作简单介绍！

话不多说，进入正题

首先贴两个链接

1、vue-Baidu-Map官方介绍：https://dafrok.github.io/vue-baidu-map/#/zh/index

2、百度地图官方提供的 JavaScript API: http://lbsyun.baidu.com/index.php?title=jspopular3.0

vue-Baidu-Map 官方提供了较为详细的文档和api，为vue结合百度地图做了很详细的指南和介绍。

对于如何安装、两种注册方法就不copy官方的代码了。

以下是本地工程的代码

这里主要想说的是ready这个回调方法，最开始在属性中没找到，后来仔细看介绍才发现作者提到，但是一笔带过了。

回调方法中会带有BMap和map两个对象，是不是很熟悉。使用过百度地图JavaScript api的同学一定知道他们是做什么的。

那么既然取到了BMap和map的对象，就可以用他们来做很多事情了！

那么，重点来了！

到底解决了什么问题：

1、可以参照百度地图JavaScript api 实现 vue-Baidu-Map中暂未提供的功能

2、对父子组件之间，可以更加方便的对地图进行操作

这里只简单介绍第2点

继续刚才的代码

parent.vue

Child.vue

上述代码中，parent.vue中初始化了一个地图，并引入了一个子组件Child 并将bmap和map传入到child中，这样就可以在child中使用这两个对象，对parnet中的地图进行操作了。这样省去了父子组件方法的调用，简化了parent中的代码量！

其中上图操作参考百度地图的JavaScript api ：http://lbsyun.baidu.com/index.php?title=jspopular3.0

总结：

1、vue-Baidu-Map中，地图初始化的回调方法 ready ，其中的BMap 和 map 可以直接使用！

2、在vue中，vue-Baidu-Map 和 百度地图的JavaScript api 可以结合使用，让地图操作更加灵活！