index.html中引入
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=秘钥"></script>
<script type="text/javascript" src="http://mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"></script>
地图页面 template
<div id="allmap" ></div>
<div class="btn_box">
<van-button id="startBtn" type="warning" plain size="small" :disabled='canClick'>开始</van-button>
</div>
绘制地图的函数
import { BMPGL } from "@/bmpgl.js"
//绘制地图
drawMap(x,y){
let ele = document.getElementById('allmap')
let w = window.innerWidth
let h = window.innerHeight
ele.style.width = w+'px'
ele.style.height = h+'px'
BMPGL().then(BMPGL=>{
//标注初始坐标
let markerPoint = {'lng': 106.43382448112298, 'lat': 29.529910212258855}
//目标坐标数组
let markerTargetArr = [
{'lng': 106.43382448112298, 'lat': 29.529910212258855},
{'lng': 106.49246586479498, 'lat': 29.549015320619937},
{'lng': 106.50022722439861, 'lat': 29.61108172249397},
{'lng': 106.45193432019816, 'lat': 29.614849695100908},
{'lng': 106.43784888980636, 'lat': 29.57540453450064},
{'lng': 106.47384187988962, 'lat': 29.521054322731263},
{'lng': 106.5195270539051, 'lat': 29.531557797747364},
]
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(x,y), 13);
map.enableScrollWheelZoom(true);
map.setMapStyleV2({styleId: '6c46640ce9ae337e7fbfb5e7b495ef25'});
let deviceSize = new BMap.Size(34, 25)
//图片可以用网络格式 这里是通过import myicons from '../static/image/car.png' 引入的
var myIcon = new BMap.Icon(myicons,deviceSize,{ imageSize: deviceSize});
// 初始化
//创建标注
let p = new BMap.Point(markerPoint.lng,markerPoint.lat);
let m = new BMap.Marker(p,{icon:myIcon});
map.addOverlay(m)
let startBtn = document.getElementById('startBtn')
// 开始
startBtn.addEventListener('click',function(){
let point = new BMap.Point(markerTargetArr[0].lng,markerTargetArr[0].lat)
_move(p, point,m);
p = point
})
let checkBtn = document.getElementById('checkBtn')
checkBtn.addEventListener('click',()=>{
map.centerAndZoom(new BMap.Point( 106.5195270539051,29.531557797747364),13)
})
// 绘制路线
let pointArr=[]
markerTargetArr.forEach(ele=>{
pointArr.push(new BMap.Point(ele.lng,ele.lat))
})
var polyline = new BMap.Polyline(pointArr, {strokeColor:"lightgreen", strokeWeight:5, strokeOpacity:1,setStrokeStyle:'dashed'});
map.addOverlay(polyline);
window._move = (initPos,targetPos, nowMarker)=>{
var me = this,
//当前的帧数
currentCount = 0,
//步长,米/秒
timer = 10,
step = 4000 / (1000 / timer),
//初始坐标
init_pos = map.getMapType().getProjection().lngLatToPoint(initPos),
//获取结束点的(x,y)坐标
target_pos = map.getMapType().getProjection().lngLatToPoint(targetPos),
//当前移动断数
moveNumber = 0,
//开始坐标值
staratCoord = initPos,
//中间段坐标值
centerCoord = targetPos,
//总的步长
count = Math.round(_getDistance(init_pos, target_pos) / step);
//两点之间匀速移动
me._intervalFlag = setInterval(function() {
//两点之间当前帧数大于总帧数的时候,则说明已经完成移动
if (currentCount >= count) {
moveNumber+=1;
if(moveNumber==markerTargetArr.length){
clearInterval(me._intervalFlag);
return;
}
currentCount = 0,
init_pos = target_pos;
target_pos = map.getMapType().getProjection().lngLatToPoint(new BMap.Point(markerTargetArr[moveNumber].lng,markerTargetArr[moveNumber].lat));
count = Math.round(_getDistance(init_pos, target_pos) / step);
staratCoord = centerCoord
centerCoord = new BMap.Point(markerTargetArr[moveNumber].lng,markerTargetArr[moveNumber].lat)
}else {
currentCount++;
var x = tweenLinear(init_pos.x, target_pos.x, currentCount, count),
y = tweenLinear(init_pos.y, target_pos.y, currentCount, count),
pos = map.getMapType().getProjection().pointToLngLat(new BMap.Pixel(x, y));
if(currentCount == 1){
var proPos = null;
setRotation(proPos,staratCoord,centerCoord, nowMarker);
}
//正在移动
nowMarker.setPosition(pos);
//设置自定义overlay的位置
// me._setInfoWin(pos);
}
},timer);
}
/**
* 计算两点间的距离
* @param {Point} poi 经纬度坐标A点.
* @param {Point} poi 经纬度坐标B点.
* @return 无返回值.
*/
window._getDistance= function(pxA, pxB) {
return Math.sqrt(Math.pow(pxA.x - pxB.x, 2) + Math.pow(pxA.y - pxB.y, 2));
};
/**
*在每个点的真实步骤中设置小车转动的角度
*/
window.setRotation=(prePos,curPos,targetPos, nowMarker)=>{
var me = this;
var deg = 0;
//start!
curPos = map.pointToPixel(curPos);
targetPos = map.pointToPixel(targetPos);
if(targetPos.x != curPos.x){
var tan = (targetPos.y - curPos.y)/(targetPos.x - curPos.x),
atan = Math.atan(tan);
deg = atan*360/(2*Math.PI);
//degree correction;
if(targetPos.x < curPos.x){
deg = -deg + 90 + 90;
} else {
deg = -deg;
}
nowMarker.setRotation(-deg);
}else {
var disy = targetPos.y- curPos.y ;
var bias = 0;
if(disy > 0)
bias=-1
else
bias = 1
nowMarker.setRotation(-bias * 90);
}
return;
}
// 缓动效果 : 初始坐标,目标坐标,当前的步长,总的步长
window.tweenLinear=function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount,
d = count;
return c * t / d + b;
}
})
},
最后在周期函数中调用即可 绘制地图的函数