Vue中百度地图的应用

    百度地图对于vue项目也做了依赖，他就是vue-baidu-map，我们在vue项目中，只需要安装vue-baidu-map依赖即可使用，另外，百度地图javascript api的使用，还是需要注册开发者，申请一个key，就是这里需要使用的ak。

npm install vue-baidu-map

    or

yarn add vue-baidu-map

    在main.js中，声明使用BaiduMap，并需要加入ak参数。

     

    在页面上使用baidumap，我们在中的html部分加入标签，并设置相关属性，其实就是初始化地图控件：

    这里，只是将地图控件加入了页面，在页面的脚本里面，如何使用地图对象，以及事件响应？我们注意到这里我们设置了一些属性比如center,zoom,scroll-wheel-zoom等地图中心点，放大比例，以及滚动效果。还有一个重要的属性是这里的@ready事件，在这里，我们可以传入一个handle({BMap,map})函数，这个函数需要在methods中定义，从名字上看，我们就知道，是在地图控件加载完成之后应该要做的事情的句柄函数。

    按照官方的示例，我们增加一个公交线路，然后让小车在这个公交线路上移动：

    最终的效果图：

     

   这是一个简单的vue-baidu-map的应用，主要熟悉百度地图在vue项目中的使用，需要注意的是引入地图，以及如何在页面使用map对象。另外，小车在地图上移动，采用了设置图层，并改变图层的位置的思想。