百度地图对于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对象。另外,小车在地图上移动,采用了设置图层,并改变图层的位置的思想。