记录一下百度地图平滑移动的js功能，提示大家尽量不要有大量车辆平滑移动，因为平滑移动是计算一个点与另一个点之间的步长（n个经纬度）然后再地图上依次移动点，看起来就像平滑移动。所以大量平滑移动时计算量是很庞大的。
DEMO：http://xieze.gitee.io/baiduslidemove 做了一个简单的示例，点击下一个进行点的平滑移动。
<html lang="en"> <head> <meta charset="utf-8" /> <title>轨迹回放</title> <style type="text/css"> body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #map_canvas{width:100%;height:500px;} #result {width:100%} </style> <script src="http://api.map.baidu.com/api?v=2.0&ak=RKVMcKG7V23ABjbKnvOGyjY5GGaj0eLL"></script> </head> <body> <div id="map_canvas"></div> <div id="result"></div> <button onclick="nextOne()">下一个</button> </body> </html>js代码
<script> var pointArr = [ { 123:{lng:"116.379341",lat:"39.938776"}, 124:{lng:"116.402625",lat:"39.943091"}, 125:{lng:"116.373807",lat:"39.953103"}, 126:{lng:"116.40011",lat:"39.958357"}, 127:{lng:"116.408518",lat:"39.958025"}, 128:{lng:"116.364537",lat:"39.943755"} }, { 123:{lng:"116.379628",lat:"39.935125"}, 124:{lng:"116.403487",lat:"39.94027"}, 125:{lng:"116.38509",lat:"39.955315"}, 126:{lng:"116.392924",lat:"39.958357"}, 127:{lng:"116.392924",lat:"39.957804"}, 128:{lng:"116.368993",lat:"39.944032"} }, { 123:{lng:"116.379341",lat:"39.938776"}, 124:{lng:"116.402625",lat:"39.943091"}, 125:{lng:"116.373807",lat:"39.953103"}, 126:{lng:"116.40011",lat:"39.958357"}, 127:{lng:"116.408518",lat:"39.958025"}, 128:{lng:"116.364537",lat:"39.943755"} } ]; var nowPoint = {}; var nowMarker = {}; var map = new BMap.Map("map_canvas"); var point = new BMap.Point(116.379341, 39.938776); map.centerAndZoom(point, 15); // 初始化 for (var n in pointArr[0]) { var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/car.png", new BMap.Size(52,26)); nowPoint[n] = new BMap.Point(pointArr[0][n].lng,pointArr[0][n].lat); nowMarker[n] = new BMap.Marker(nowPoint[n], {icon:myIcon}); map.addOverlay(nowMarker[n]); } // 下一个 function nextOne(){ for (var n in pointArr[1]) { var point = new BMap.Point(pointArr[1][n].lng,pointArr[1][n].lat); console.log(nowPoint[n]) if (!pointArr[1][n]) {return;} // nowPoint[n].setPosition(new BMap.Point(pointArr[1][n].lng,pointArr[1][n].lat)); _move(nowPoint[n], point, nowMarker[n]); nowPoint[n] = point; } }; function _move(initPos,targetPos, nowMarker){ var me = this, //当前的帧数 currentCount = 0, //步长，米/秒 timer = 10, step = 400 / (1000 / timer), //初始坐标 init_pos = map.getMapType().getProjection().lngLatToPoint(initPos), //获取结束点的(x,y)坐标 target_pos = map.getMapType().getProjection().lngLatToPoint(targetPos), //总的步长 count = Math.round(_getDistance(init_pos, target_pos) / step); console.log(count); //如果小于1直接移动到下一点 // if (count < 1) { // me._moveNext(++me.i); // return; // } //两点之间匀速移动 me._intervalFlag = setInterval(function() { //两点之间当前帧数大于总帧数的时候，则说明已经完成移动 if (currentCount >= count) { clearInterval(me._intervalFlag); return; //移动的点已经超过总的长度 // if(me.i > me._path.length){ // return; // } //运行下一个点 // me._moveNext(++me.i); }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)); //设置marker if(currentCount == 1){ var proPos = null; // if(me.i - 1 >= 0){ // proPos = me._path[me.i - 1]; // } setRotation(proPos,initPos,targetPos, nowMarker); } //正在移动 nowMarker.setPosition(pos); //设置自定义overlay的位置 // me._setInfoWin(pos); } },timer); } /** * 计算两点间的距离 * @param {Point} poi 经纬度坐标A点. * @param {Point} poi 经纬度坐标B点. * @return 无返回值. */ function _getDistance(pxA, pxB) { return Math.sqrt(Math.pow(pxA.x - pxB.x, 2) + Math.pow(pxA.y - pxB.y, 2)); }; /** *在每个点的真实步骤中设置小车转动的角度 */ function 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; } // 缓动效果 : 初始坐标，目标坐标，当前的步长，总的步长 function tweenLinear(initPos, targetPos, currentCount, count) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; return c * t / d + b; } </script>