Shulou(Shulou.com)06/03 Report--

This article introduces how to understand the smooth movement of JavascriptApi Marker and the direction of the front of the car. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

I believe that as long as you use Baidu Maps to do real-time location service, you will encounter this problem. When displaying the coordinates, there will be time to obtain coordinate data or the distance between the two coordinate points is too far. As a result, Marker moves visually like a "zombie jump", showing customers minutes of disdain for you. In addition, if you use the directional icon ICON, it will attract complaints. Why is your car turning towards the back when turning at this overpass? What's the matter with you? Can't you do it?!

1. The covering moves smoothly between coordinate points while obtaining coordinate data.

First of all, the effect of zombie jump occurs because the project is located based on real-time coordinate data, so there is a process of waiting for new data, and the coordinate change of the cover is just a setPosition (BMap.Point) method. So the solution for now is to let him find something to do while he is waiting, instead of jumping directly from the starting point to the finish line and moving slowly. Small broken steps, smooth movement in the past ~

How do you move it? At this point, this thing can be transformed into the process of knowing the coordinates of the starting point and moving the cover. to put it bluntly, it is to ask the mulch to perform setPosition (BMap.Point) several times on the line connected by the two points, and don't take such a big step at a time, just make sure you arrive before the next new coordinates come.

So here comes the question again. How do I know the points on these two lines? Because the latitude and longitude coordinates obtained are spherical coordinates, they have to be converted to plane coordinates first.

{BMap.Pixel} = map.getMapType () .getProjection () .lngLatToPoint (BMap.Point)

Then under the small operation (refer to the open source file of the road book)

/ * ease effect * initial coordinates, target coordinates, current step size, total step size * @ param {BMap.Pixel} initPos initial plane coordinates * @ parm {BMap.Pixel} targetPos target plane coordinates * @ param {number} current frames * @ param {number} count Total frames * / 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)

After calculation, we get a plane coordinate pixel (XBI y). Then convert the plane coordinates to spherical coordinates and give them to Marker for positioning. These methods can be found in the reference documentation of Baidu class library. Magic: 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 positioning coordinate values of the cover. Of course, if this place is to be executed many times, it needs a setInterval.

Me._em._newPointMark.setPosition (pos)

Complete method:

/ * param {Point} prvePoint start coordinates (PrvePoint) * @ param {Point} newPoint target point coordinates * @ param {Function} Animation effects * @ return No return value * / this.Move = function (prvePoint, newPoint, effect, setRotation) {var me = this, / / current frames currentCount = 0, / / initial coordinates _ prvePoint = me._projection.lngLatToPoint (prvePoint) / / convert spherical coordinates to plane coordinates / / get the (x _ newPoint y) coordinates of the end point _ newPoint = me._projection.lngLatToPoint (newPoint), / / the number of times to cycle positioning between the two points count = me._runTime / me._intervalTimer / / uniform movement between two points me._intervalFlag = setInterval (function () {/ / when the current number of frames between two points is greater than the total number of frames, it means that you have finished moving if (currentCount > = count) {clearInterval (me._intervalFlag);} else {/ / animated moving currentCount++ / / count var x = effect (_ prvePoint.x, _ newPoint.x, currentCount, count), y = effect (_ prvePoint.y, _ newPoint.y, currentCount, count); / / convert to spherical coordinates var pos = map.getMapType (). GetProjection (). PointToLngLat (new BMap.Pixel (x, y)) / / set marker angle (the distance between two points is the same) if (currentCount = = 1) {/ / convert angle setRotation (prvePoint,newPoint, me._em);} / / moving me._em._newPointMark.setPosition (pos);}}, me._intervalTimer); me._em._prvePoint = newPoint;}

It is worth noting that the key here is that the count = me._runTime / me._intervalTimer; determines how many small steps to take between these two points.

The origin of this count has to be calculated according to its own project requirements.

1. Control the animation effect by controlling the moving data of the cover. This method needs to calculate the distance of each execution from the speed and the time of each execution, and then get the number of times to execute at the distance between the two points. (this method is suitable for historical trajectory playback. All the coordinate information is already known. After one point is executed, it jumps to the next coordinate. Only by controlling the speed to control the speed of the animation.)

2, the animation effect is controlled by controlling the total time of the gentle movement process and the interval time between each execution. This method is the example in this paper, and the number of times to be executed can be obtained by directly doing business between the two. (this method is suitable for real-time positioning, because how long the next positioning data will be received, which allows us to control, so the total time of this slow-moving animation process can also be controlled by ourselves.)

Second, the front of the car points to the direction of the course

This function is actually to change the rotation angle of the cover em._newPointMark.setRotation (number)

Just for the same reason, because the coordinate data obtained are spherical coordinates, it is still necessary to convert them into plane coordinates before they can be calculated, and then through the trigonometric function tan#$% ^ & * (the angle value between the two points is obtained after calculation. This part does not have too many personalized logic operations, directly refer to Baidu big on the line.

/ * set the rotation angle of the car in the real step of each point * @ param {BMap.Point} curPos start * @ param {BMap.Point} targetPos end * / 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

0) bias =-1 else bias = 1 em._newPointMark.setRotation (- bias * 90);} return;}

Just refer to the calculation method and get it.

There are so many basic and calculation methods for these two functions, and the logic code required by other business logic is wrapped in their own requirements implementation code!

Effect picture

On how to understand the smooth movement of JavascriptApi Marker and the direction of the front of the car to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.