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>
1
2

地图页面 template

  <div id="allmap" ></div>
    <div class="btn_box">
      <van-button id="startBtn" type="warning" plain size="small" :disabled='canClick'>开始</van-button>
    </div>

1
2
3
4
5

绘制地图的函数

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;
        }
     })
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

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