image.png

image.png

image.png

分别说一下这几种错误,第一种是没有引入BMapGLLib工具箱,第二种是没有引入下列js,第三种你的地图map不是bmap,百度地图肯定是必需的就不用说啦

<script type="text/javascript" src="//api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"></script>
 let map = new BMapGL.Map('allmap')
 let point = new BMapGL.Point(118.323181,32.287164)
 // 初始化地图,设置中心点坐标和地图级别
        map.centerAndZoom(point, 14)
        // 开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true)
var path = [{
        'lng': 118.318025,
        'lat': 32.281167
    }, {
    	'lng': 118.316048,
    	'lat': 32.27987
    }, {
    	'lng': 118.316156,
    	'lat': 32.27987
    }, {
    	'lng': 118.316551,
    	'lat': 32.279916
    }, {
    	'lng': 118.317881,
    	'lat': 32.280282
    }, {
    	'lng': 118.320522,
    	'lat': 32.281167
    }, {
    	'lng': 118.320324,
    	'lat': 32.283121
    }];
 var pathpoint = [];
     for (var i = 0; i < path.length; i++) {
        pathpoint.push(new BMapGL.Point(path[i].lng, path[i].lat));
    }
 div.onclick = function(e){
               var myIcon = new BMapGL.Icon("https://img0.baidu.com/it/u=800885108,2483076055&fm=26&fmt=auto&gp=0.jpg", new BMapGL.Size(40, 60), {  // 小车图片
		offset: new BMap.Size(0, -5),    //相当于CSS精灵
		imageOffset: new BMapGL.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
	  });
             var pl = new BMapGL.Polyline(pathpoint);
             var trackAni = new BMapGLLib.TrackAnimation(map, pl, {
    overallView: true, // 动画完成后自动调整视野到总览
    tilt: 30,          // 轨迹播放的角度,默认为55
    duration: 20000,   // 动画持续时长,默认为10000,单位ms
    delay: 3000        // 动画开始的延迟,默认0,单位ms
});
 trackAni.start()
             var carMk = new BMapGL.Marker(pathpoint[0], { icon: myIcon });
              map.addOverlay(carMk);
              var carMK1 = new BMapGL.Marker(pathpoint[pathpoint.length-1], { icon: myIcon });
              map.addOverlay(carMK1);
            }
            // 添加DOM元素到地图中
            map.getContainer().appendChild(div);
            // 将DOM元素返回
            return div;
        },

更多推荐