Baidu Map Javascriptapi marker smooth movement and direction

Believe that as long as the use of Baidu map to do real-time location service friends will encounter this problem, in the coordinates of the location of the overlay display, will appear due to obtain coordinate data time or two coordinate points far apart, resulting in visual marker movement like "Zombie Jump", A bounce to the customer to see Minutes to despise you to be too. In addition, if you are using a directional icon icons, it will lead to spit groove ~ eh eh, how do you this trolley car in this overpass when the front of the turn toward the back? What the hell happened to you! Will you do it!

So today, referring to Baidu greatly provided by the road book open source files to achieve their own needs, record a bit to provide reference.

　The covering is moving smoothly between coordinate points while acquiring coordinate data.

First, the result of the zombie jump is because the project is based on real-time coordinate data positioning, so there is a process to wait for new data, and the change in the coordinates of the overlay is a setposition (Bmap.point) method is also caused by a pause. So at present the solution is: let him this covering in the waiting period to find something to do, do not go straight from the beginning to the end of the jump, slowly moving past. Small rags, smooth movement of the past ~ ~

How do you move it? At this point, this thing can be converted to a known starting point coordinates, moving the cover of the process, and plainly is to let his cover in two points connected to the line more than a few setposition (Bmap.point), a step not so big, Just make sure you get there before the next new coordinates come.
So the question comes again, how do I know the dots on these two lines? Because the latitude and longitude coordinates obtained are spherical coordinates, it is first converted to planar coordinates {bmap.pixel}= map.getmaptype (). getprojection (). Lnglattopoint (Bmap.point);

Then the small operation (refer to the Road book open source file)

　　

1/* 2     * Easing effect 3     * Initial coordinate, target coordinate, current step, total step 4     * @param {bmap.pixel} initpos initial plane coordinate 5     * @parm {bmap.pixel} Targetpos Target plane coordinates 6     * @param {Number} current frame 7     * @param {Number} count total Frames 8     *     /9 this.linear = function (initpo S, Targetpos, Currentcount, Count) {ten         var b = initpos, c = targetpos-initpos, t = currentcount,11         d = count;12         return c * t/d + b;13     }  var x = effect (_prvepoint.x, _newpoint.x, Currentcount, Count),          y = effect (_prvepoint.y, _newpoint.y, Currentcount, Count);

The computed result is a planar coordinate pixel (x, y). Then the plane coordinates are converted to spherical coordinates to locate the marker. (These methods can be found in the Baidu Class Library Reference document.) Magic Gate: http://developer.baidu.com/map/reference/index.php?title=Class:%E6%80%BB%E7%B1%BB/%E5%9C%B0%E5%9B%BE%E7%B1 %BB%E5%9E%8B%E7%B1%BB)

var pos = Map.getmaptype (). getprojection (). Pointtolnglat (New Bmap.pixel (x, y));

Modify the overlay positioning coordinate values. Of course, this place has to be executed many times, and it needs a setinterval.

Me._em._newpointmark.setposition (POS);

Complete method:

　　　　

 1/** 2 * Trolley Move 3 * @param {point} prvepoint Start Coordinate (prvepoint) 4 * @param {point} newpoint target Point coordinates 5 * @param {Fu Nction} animation effect 6 * @return no return value 7 */8 9 this.                 Move = function (Prvepoint, newpoint, Effect, setrotation) {ten var me = this,11//Current number of frames 12 Currentcount = 0,13//initial coordinate _prvepoint = Me._projection.lnglattopoint (Prvepoint),//Ball                Polygon coordinates converted to planar coordinates 15//Get end point (x, y) coordinates _newpoint = Me._projection.lnglattopoint (newpoint), 17                Number of cycles to be positioned between two points count = me._runtime/me._intervaltimer;19//Two points moving at a constant speed 20 Me._intervalflag = setinterval (function () {21//two points the current number of frames is greater than the total number of frames, then the move is complete if (Currentcount >= count)                 {clearinterval (me._intervalflag); or else {25//animation move 26 currentcount++;//count var x = effecT (_prvepoint.x, _newpoint.x, Currentcount, count), y = effect (_prvepoint.y, _NEWPOINT.Y, cur Rentcount, count); 29//converted to spherical coordinates according to plane coordinates-var pos = Map.getmaptype (). getprojection (). PO  Inttolnglat (New Bmap.pixel (x, y)); 31//Set marker angle (distance between two points is the same as the angle of the car) if (Currentcount = =                                                                                                                            1) {33//conversion angle                     Setrotation (Prvepoint,newpoint, me._em); 35                }36//is moving the PNS me._em._newpointmark.setposition (POS); 39}40 }, Me._intervaltimer); me._em._prvepoint = newpoint;42}

It is worth noting that the key here is this count = Me._runtime/me._intervaltimer; Decide how many small rags to walk between these two points ~ ~

The origin of this count is also calculated according to the needs of the project.

1. Control the animation effect by controlling the cover movement data. This method needs to calculate the distance between each execution by the speed and the time of each execution, and then the number of times that the quotient will be executed with the distance between two points. (This method is suitable for the history of the track playback of this, all the coordinate information has been known, a point after the execution of the jump to the next coordinate, just by controlling the speed to control the animation to show how fast or slow)

2, control the animation effect by controlling the total time of the gentle moving process and each execution interval. This method is the example in this article, and the number of times to be executed can be obtained directly from the two vendors. (This method is suitable for real-time location use, because the next time the location data is received after the interval, this allows us to control, so the total time of the smooth moving animation process can be controlled by ourselves)
　　　　

second, the direction of the front-pointing

This function is actually changing the angle of rotation of the covering em._newpointmark.setrotation (number);

It's just the same reason, because the coordinate point data is the spherical coordinates, so we have to go to the plane coordinates first to calculate, and then through the trigonometric tan#$%^&* (calculated to get the angle value between two points.) This section does not have too many personalized logical operation, direct reference Baidu greatly on the line.

 1/** 2 * Set car rotation angle in real step of each point 3 * @param {bmap.point} curpos start 4 * @param {bmap.point} targetpos end 5 */6            This.setrotation = function (CurPos, Targetpos, EM) 7 {8 var me = this; 9 var deg = 0;10 CurPos = Map.pointtopixel (curpos); targetpos = Map.pointtopixel (Targetpos); if (targe Tpos.x! = curpos.x) {$ var tan = (targetpos.y-curpos.y)/(targetpos.x-curpos.x), Atan                   = Math.atan (tan), deg = Atan * (2 * Math.PI), if (Targetpos.x < curpos.x) {17               deg =-deg + + 90;18} else {deg =-deg;20}21               Em._newpointmark.setrotation (-deg); n} else {var disy = targetpos.y-curpos.y;25                   var bias = 0;26 if (Disy > 0) bias = -128 Else29       Bias = 130        Em._newpointmark.setrotation (-bias *);}32 return;33} 

Baidu Map Javascriptapi marker smooth movement and direction