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，我们在<template></template>中的html部分加入<baidu-map></baidu-map>标签，并设置相关属性，其实就是初始化地图控件：

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

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

<script type="text/javascript">
/* eslint-disable */ 
  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: 'hello,vuejs.',
		location: {
			lng: 116.404,
			lat: 39.915
		},
		zoom: 18
      }
    },
	components:{
		//BaiduMap
	},
	mounted(){
		console.log("map is ready.");
		
	},
	methods: {
		handler ({BMap,map}){
			var start = new BMap.Point(116.380967,39.913285);
			var end = new BMap.Point(116.424374,39.914668);
			var car = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/car.png",
		             new BMap.Size(52,26),{
						imageOffset:new BMap.Size(0,0)
					 });
			var driving = new BMap.DrivingRoute(map,{
				renderOptions:{
					map: map,
					autoViewport: true
				}
			});
			driving.search(start,end);
			driving.setSearchCompleteCallback(function(){
				var pts = driving.getResults().getPlan(0).getRoute(0).getPath();
				var paths = pts.length;
				var carMarker = new BMap.Marker(pts[0],{icon:car});
				map.addOverlay(carMarker);
				var i = 0;
				function resetMarkerPosition(i){
					carMarker.setPosition(pts[i]);
					if(i<paths){
						setTimeout(function(){
							i++;
							resetMarkerPosition(i);
						},100);
					}
				}
				setTimeout(function(){
					resetMarkerPosition(5);
				},100);
			})
		}
	}
  }
</script>

    最终的效果图：

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