1.查看vue-baidu-map依赖提供的文档:https://dafrok.github.io/vue-baidu-map/#/
2.集成过程
(1)使用npm或者yarn进行安装,会将依赖文件安装进入package.json中看到
①Npm install vue-baidu-map --save
②Yarn add vue-baidu-map --save
(2)分为两种引进方法
①局部引入(轻量且快速)
1)首先导入依赖到这个页面
2)使用依赖组件
![](https://img2018.cnblogs.com/blog/1053293/201911/1053293-20191111154441245-1652420780.png)
3)使用组件的标签baidu-map
![](https://img2018.cnblogs.com/blog/1053293/201911/1053293-20191111154502457-193541974.png)
4)设置初始容器的高度(默认为0的容器,看不见)
![](https://img2018.cnblogs.com/blog/1053293/201911/1053293-20191111154522808-1657720232.png)
②全局引入(未采用)
(3)实现地图高度自动化
①让百度地图提供绑定的样式
![](https://img2018.cnblogs.com/blog/1053293/201911/1053293-20191111154615215-1367096468.png)
②提供data值去占位
![](https://img2018.cnblogs.com/blog/1053293/201911/1053293-20191111154629601-1133646247.png)
③当页面创建和销毁时,提供监听事件
![](https://img2018.cnblogs.com/blog/1053293/201911/1053293-20191111154644704-302277163.png)
④提供方法去更改浏览器高度
![](https://img2018.cnblogs.com/blog/1053293/201911/1053293-20191111154701241-1675864181.png)
3.添加点
(1)首先需要知道Vue中两个对象的概念
①Marker 表示地图上一个图像标注
构造方法为(Point, MarkerOptions),前一个为点,后一个为类似标题等基本配置,使用json格式
![](https://img2018.cnblogs.com/blog/1053293/201911/1053293-20191111154748061-991320874.png)
②Point 表示地理坐标点
构造函数需要传递经纬度
![](https://img2018.cnblogs.com/blog/1053293/201911/1053293-20191111154757267-725855604.png)
(2)实现方式
①通过标签BMap的ready来初始化地图
![](https://img2018.cnblogs.com/blog/1053293/201911/1053293-20191111154807839-1864066462.png)
②讲BMap和Map两个初始化得到的实例存放到本地,以备后用
![](https://img2018.cnblogs.com/blog/1053293/201911/1053293-20191111154818983-1247629067.png)
③通过BMap实例化图像标注并绑定点击事件
![](https://img2018.cnblogs.com/blog/1053293/201911/1053293-20191111154835142-140085257.png)
④将其加载到当前Map上
![](https://img2018.cnblogs.com/blog/1053293/201911/1053293-20191111154847121-1244179413.png)
(3)注意项
①初始时,我直接使用JSON格式的经纬度左边,没有使用百度提供的Point构造方式,然后绑定事件会报错。
4.绘图
(1)初始化提供一个遮蔽层
![](https://img2018.cnblogs.com/blog/1053293/201911/1053293-20191111154905465-1485823532.png)
(2)v-model关联对应的数据paths,数据格式为二维数组,一维数组用来存放有多少组连线,二维用来存放点,会依照点的顺序来一次连线。
![](https://img2018.cnblogs.com/blog/1053293/201911/1053293-20191111154916017-189834557.png)
(3)查询到的数据直接存放在数据paths中就可以了