index.html中引入
<script type="text/javascript" src="http://api./api?v=3.0&ak=秘钥"></script><script type="text/javascript" src="http://mapopen./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.innerWidthlet h = window.innerHeightele.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.4519343816, '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 = centerCoordcenterCoord = 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=-1elsebias = 1nowMarker.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;}})},
最后在周期函数中调用即可 绘制地图的函数
