相信只要是使用百度地图做实时定位服务的朋友都会遇到这个问题,在对坐标位置进行覆盖物展示的时候,会出现由于获取坐标数据时间或者两个坐标点相距过远,导致在视觉上看Marker移动就像“僵尸跳”一样，一蹦一蹦的给客户看分分钟鄙视你到不能自已。另外如果用的是有指向性图标ICON的时候，更会引来吐槽~诶诶诶，你这小车车怎么在这个立交桥转弯的时候车头向着后面呢？怎么搞得嘛你！会不会弄啊你！
所以今天参照百度大大提供的路书开源文件实现下自己的需求，记录一下以便提供参考。
一、覆盖物在获取坐标数据的同时，在坐标点之间平滑的移动
首先，之所以会出现僵尸跳的效果，是因为项目是根据实时坐标数据进行定位，所以存在一个等待新数据的过程，而对于覆盖物的坐标改变就是一个setPosition(BMap.Point)方法而已也就造成了停顿。所以目前暂且解决方案就是：让他这个覆盖物在这个等待的期间找点事情做，不要一下就直接从起点蹦到终点了，慢慢的移动过去。小碎步，平滑的的移动过去~~
怎么移动呢"htmlcode">
/*
*缓动效果
*初始坐标，目标坐标，当前的步长，总的步长
*@param{BMap.Pixel} initPos 初始平面坐标
*@parm{BMap.Pixel} targetPos 目标平面坐标
*@param{number} 当前帧数
*@param {number} count 总帧数
*/
this.linear = function (initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount,
d = count;
return c * t / d + b;
}
var x = effect(_prvePoint.x, _newPoint.x, currentCount, count),
y = effect(_prvePoint.y, _newPoint.y, currentCount, count);
经过计算得到的是一个平面坐标pixel(x,y)。然后再将平面坐标转换为球面坐标给Marker进行定位即可。（这些方法在百度类库参考文档中都可以找得到的。魔法门： http://developer.baidu.com/map/reference/index.php"htmlcode">
/**
*小车移动
*@param {Point} prvePoint 开始坐标(PrvePoint)
*@param {Point} newPoint 目标点坐标
*@param {Function} 动画效果
*@return 无返回值
*/
this.Move = function (prvePoint, newPoint, effect, setRotation) {
var me = this,
//当前帧数
currentCount = 0,
//初始坐标
_prvePoint = me._projection.lngLatToPoint(prvePoint),//将球面坐标转换为平面坐标
//获取结束点的(x,y)坐标
_newPoint = me._projection.lngLatToPoint(newPoint),
//两点之间要循环定位的次数
count = me._runTime / me._intervalTimer;
//两点之间匀速移动
me._intervalFlag = setInterval(function () {
//两点之间当前帧数大于总帧数的时候，则说明已经完成移动
if (currentCount >= count) {
clearInterval(me._intervalFlag);
} else {
//动画移动
currentCount++;//计数
var x = effect(_prvePoint.x, _newPoint.x, currentCount, count),
y = effect(_prvePoint.y, _newPoint.y, currentCount, count);
//根据平面坐标转化为球面坐标
var pos = map.getMapType().getProjection().pointToLngLat(new BMap.Pixel(x, y));
//设置marker角度(两点之间的距离车的角度保持一致)
if (currentCount == 1) {
//转换角度 setRotation(prvePoint,newPoint, me._em);
}
//正在移动
me._em._newPointMark.setPosition(pos);
}
}, me._intervalTimer);
me._em._prvePoint = newPoint;
}
值得注意的是，这里关键的就是这个count = me._runTime / me._intervalTimer; 决定了在这两个点之间要走多少个小碎步~~
这个count的由来也得根据自身项目需求计算。
1，通过控制覆盖物移动数据控制动画效果。这种方法就需要通过 速度与每次执行的时间计算得到每次执行前进的距离，然后在与两点之间的距离做商得到要执行的次数。（这种方法呢适合做历史轨迹回放这种，所有坐标信息都已经知道，一个点执行完就跳到下一个坐标，只是通过控制速度来控制动画的展示快慢）
2，通过控制平缓移动过程的总时间与每次执行间隔时间来控制动画效果。此方法就是文中的示例，直接二者做商即可得到要执行的次数。（这种方法适合做实时定位使用，因为下一次定位数据是间隔多少时间后接收，这个使我们可以控制的，所以这个平缓移动的动画过程的总时间也是可以由我们自己控制的）
二、车头指向行径方向
这个功能其实就是改变覆盖物的旋转角度em._newPointMark.setRotation(number);
只是还是那个原因，因为得到的坐标点数据是球面坐标，所以还是要先进行转为平面坐标才好计算，然后通过三角函数tan#$%^&*( 计算后得到两个点之间的角度值。此部分没有太多个性化的逻辑操作，直接参照百度大大的就行了。
/**
*在每个点的真实步骤中设置小车转动的角度
*@param{BMap.Point} curPos 起点
*@param{BMap.Point} targetPos 终点
*/
this.setRotation = function (curPos, targetPos, em)
{
var me = this;
var deg = 0;
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);
if (targetPos.x < curPos.x) {
deg = -deg + 90 + 90;
} else {
deg = -deg;
}
em._newPointMark.setRotation(-deg);
} else {
var disy = targetPos.y - curPos.y;
var bias = 0;
if (disy > 0)
bias = -1
else
bias = 1
em._newPointMark.setRotation(-bias * 90);
}
return;
}
参考计算方法就得了~~~
值此两个功能的最基础的及计算方法等就这么多，其他的业务逻辑需要的逻辑代码包裹着就是自己的需求实现代码了！
效果图
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。