百度地图JavascriptApi Marker动作流畅 车头指向动作方向

相信任何一个用百度地图做实时定位服务的朋友都会遇到这个问题。在显示坐标位置时，会出现获取坐标数据的时间或者两个坐标点之间的距离太远，导致Marker的视觉移动就像“僵尸跳”，一分钟一分钟向客户展示，看不上你。另外，如果使用方向ICON图标，甚至会引来吐槽~诶诶诶诶，你的车在翻立交桥的时候是怎么转到后面的？你怎么了！不会得到你的！

所以今天参考百度提供的路书开源文件，实现自己的需求，记录下来供参考。

1.当获取坐标数据时，覆盖物在坐标点之间平滑移动

首先，僵尸跳跃效果的发生是因为项目是根据实时坐标数据定位的，所以有一个等待新数据的过程，封面的坐标变化只是一个setPosition(BMap。Point)方法，这将导致暂停。所以，目前暂时的解决办法是让他在这段等待期间找点事做，而不是直接从起点跳到终点，慢慢地挪过去。小步，平稳的运动过去~ ~

怎么动？这时，这件事就可以转化为已知起点的坐标，就可以进行移盖的过程了。说白了就是让他的封面执行setPosition(BMap。点)在连接两点的线上分几次，一次不要迈那么大，只要保证在下一个新坐标到来之前到达即可。

然后问题又来了。我怎么知道这两条线上的点？因为得到的经纬度坐标是球面坐标，所以必须先转换成平面坐标

{BMap。Pixel}=map.getMapType()。getProjection()。lnglattopint(BMap。点)；

然后在小操作下(参考路书开源文件)

/* *慢效果*初始坐标、目标坐标、当前步长、总步长*@param{BMap。Pixel} initPos初始平面坐标*@parm{BMap。Pixel} targetPos目标平面坐标*@param{number}当前帧数*@param {number}计数总帧数*/this.linear=function (initPos，targetPos，currentCount，count) { var b=initPos，c=targetPos - initPos，t=currentCount，d=count返回c * t/d b；} var x=效果(_prvePoint.x，_newPoint.x，currentCount，Count)，y=效果(_prvePoint.y，_newPoint.y，currentCount，count)；经过计算，得到一个平面坐标像素(x，y)。然后，将平面坐标转换为球面坐标，可以定位标记。(这些方法可以在百度类库参考文献中找到。魔门：http://developer.baidu.com/map/reference/index.php?称号=:普通类/地图类型类)

var pos=map.getMapType()。getProjection()。新的BMap。像素(x，y))；

修改覆盖定位的坐标值。当然，如果要多次执行，这个地方需要一个setInterval。

我。_em。_ newpointmark . set position(pos)；

完整方法：

/* * *这个。move=函数(prve点、新点、效果、设置旋转){var me=this，//当前帧数currentCount=0，//初始坐标_ prvepoint=me。_ projection . lnglattopint(prvepoint)，//将球面坐标转换为平面坐标//获取终点的(x，y)坐标_ new point=me。_ projection . lnglattopint(new point)，//两点之间循环定位的次数count=me //move me。_ interval flag=set interval(function(){//当当前两点之间的帧数大于总帧数时，意味着if(current count=count){ clear interval(me。_ interval标志)已被移动；} else {//动画移动currentCount//count var x=effect(_ prvepoint . x，_ newpoint.x，currentcount，count)，y=effect (_ prvepoint.y，_ newpoint.y，currentcount，count)；//根据平面坐标，将其转换为球面坐标var pos=map.getmaptype()。getprojection()。pointtollat(new map . pixel(x，y))；//如果(currentCount==1) {//转换角度setrotation (prve点，new点，me)。_ em)；}//感动我。_ em。_ newpointmark。设定位置(pos)；} }，我。_ interval timer)；我。_em。_ prvePoint=newPoint}值得注意的是，这里的关键是这个计数=我。_ runtime/me。_间隔计时器；它决定了在这两点之间要走多少小步~ ~

这个计数的来源也要根据它自己的项目要求来计算。

1.通过控制覆盖的移动数据来控制动画效果。这种方法需要通过每次执行的速度和时间来计算每次执行的前向距离，然后用两点之间的距离做商来计算要执行的次数。(此方法适用于历史曲目回放。所有坐标信息都是已知的。当一个点被执行时，它会跳到下一个坐标，只需通过控制速度来控制动画显示速度。)

2.通过控制平缓移动过程的总时间和每次执行的间隔时间来控制动画效果。这种方法是本文的一个例子，两者之间直接做生意就可以得到执行的次数。(这种方法适合实时定位，因为间隔后会收到下一个定位数据，我们可以控制，所以这个轻轻移动的动画过程的总时间也可以由我们自己控制。)

第二，汽车的前部指向行动的方向

功能实际上是改变覆盖em的旋转角度。_ newpointmark。set rotation(number)；

只是出于同样的原因，由于得到的坐标点数据是球面坐标，所以需要在计算前将其转换为平面坐标，然后通过三角函数tan # $% *计算后得到两点之间的角度值。本节个性化逻辑操作不多，直接参考百度就可以了。

/* * *在每个点的实步中设置小车的转角*@param{BMap。Point} curPos起点*@param{BMap。Point} targetPos结束点*/this。setrotation=function (curpos，targetpos，em){ var me=this；var deg=0；cur pos=map . pointtopixel(cur pos)；target pos=map . pointtopixel(target pos)；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 . set rotation(-deg)；} else { var disy=TargetPoS . y-CurPoS . y；var偏差=0；if (disy 0) bias=-1 else bias=1 em。_ newpointmark . set rotation(-bias * 90)；}返回；}只是参考计算方法~ ~ ~

这种场合下，这两个功能的基础和计算方法那么多，其他业务逻辑所需的逻辑代码都是用自己的需求实现代码包装的！

翻译

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！