vue中引入百度地图：一个小白的vue插件探索之路

1. 相关文档和工具

百度地图插件地址（插件文档在github项目代码里，可下载下来运行项目阅读）
百度地图 javascript API（插件的文档有些并未解释完全，需要结合官方API文档阅读）
密钥申请（必须要申请开发者密钥才可以使用百度地图）
坐标拾取器（用来获取地图上点的经纬度）

2.引入

效果图

步骤：

注册组件
初始化地图
添加缩放控件
添加地图类型控件
添加点
添加线
添加信息窗体
添加外部浮层

2.1 安装注册组件

安装组件

$ npm install vue-baidu-map --save

注册组件

可全局注册，也可局部注册，因为我只有一个页面用到地图，所以采用局部注册

2.2 初始化地图

2.3 添加缩放控件

关于anchor属性，插件文档中的说明是

但文档中并未说明ControlAnchor类型是什么，此时要用到百度地图 javascript API，找到官方文档解释：

后面的操作就同理啦，插件文档中没有详细说明的东西都可以去官方API文档中查找，毕竟插件也是在官方js的基础上写的嘛（我真厉害哈哈O(∩_∩)O）

2.4 添加地图类型控件

同理，找到官方文档百度地图 javascript API，设置地图类型：

2.5 添加点

这里是循环输出多个点，直接在marker组件上使用v-for，不需要加div来循环（来自一个小白走过的坑...）

2.6 添加线

线是由多个点组成的，因此只要给出点的数组就能画出线啦~
线和点是分开的，当需要既显示点，又显示点连成的线时，还是需要分成点和线
这里给出线的数据结构以供参考：

towerLines:[
  [{lng:'12.12',lat:'13.13'},{lng:'13.13',lat:'14.14'},{lng:'14.14',lat:'15.15}],//第一条线
  [{lng:'12.12',lat:'13.13'},{lng:'13.13',lat:'14.14'},{lng:'14.14',lat:'15.15}],//第二条线
]

2.7 添加信息窗体

tips：此处有两种类型的点，但我使用了同一个窗体显示数据，因为在使用两个窗体显示数据时，两个窗体在切换时必须要先关掉上个窗体才能打开下个窗体，体验不太好

2.8 添加外部浮层


        
            当前人数{{deviceInfo.totalnum}}个，
            在线人数{{deviceInfo.onlinenum}}个，
            离线人数{{deviceInfo.offlinenum}}个，
            矿工人数{{deviceInfo.warmnum}}个

让浮层可以居中显示的关键代码：

    .map
        position relative
         .sum-message
              position absolute
              left 50%
              top 0
              transform translateX(-50%);

3 心得

虽然自己已经用过第三方插件，比如element-ui和swiper，但是都是按照别人的文章指引，总是糊里糊涂的在用，仿佛插件是个很神秘的东西。
这次，通过百度地图插件的引入过程，我终于揭开了插件这个神秘的面纱，我看到了源码、文档，虽然没有看太懂，但是也让我不再“畏惧”插件，至少让我懂得：vue的插件也就是用vue写的一些组件罢了！