[游戏开发]vue实现百度地图H5 标注平移动画实现

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;
        }
     })
    },

最后在周期函数中调用即可 绘制地图的函数