First put a picture, this is the end of the road book display effect
1, demand--2, solutions--3, implementation Method--4, subsequent expansion
1. Demand
Demand is probably like, to achieve the progress of the book play, you can forward back, pause, when the mouse hover trolley display location information (callout)
Subsequent (playback speed modification)
2, solve the idea
The original idea: I threw a bunch of coordinates points to the road Book API, the road book should have the way forward, pause, back, and then I get the next play progress, I write a control bar mapping is almost. As for the label, I didn't think much at the time.
However, the road book provides the following methods: http://api.map.baidu.com/library/LuShu/1.2/docs/symbols/BMapLib.LuShu.html
Except for the beginning, the pause is useful, the others are not
Difficulty: Forward, rewind, get playback progress
3. Solutions
To know the premise:
1, this progress bar is not played in the dimension of time, but with the coordinate point (usually the progress bar is 1s forward, this is a coordinate point to advance a bit)
2,Bmaplib.lushu(map, Path, opts)
{map} map An instance object of the Baidu map.
{Array} path constitutes an array of point for the alignment.
{Json Object} opts Optional input parameter, not required (see above link for details)
Forward and backward thinking:
As long as you modify the path each time, restart the road book, you can achieve a similar effect of forward and backward
All we have to do is clear off the last road book.
How to clean up?
1, call Map.clearoverlays (); , then redraw the polyline, and then start the road book (or set the polyline directly to not be cleared)
2, Lushu.stop () and then Lushu.start (), will find the road book to start again, there must be a clear operation in the middle, key out to execute once just fine
Clear Code
//added to A.object.extend (c.prototype,{}) in the second argument_clearmark:function(f) { This. Stop (); This. _map.removeoverlay ( This. _marker); Cleartimeout ( This. _timeoutflag) His._overlay&& This. _map.removeoverlay ( This. _overlay); },//external exposure Call method C.prototype.start with this.C.prototype.clear=function(){ This. _clearmark (); };
Get Playback progress:
Idea: The first thought is the direct return progress (percent type), and later thought that the current path in the path ( Bmaplib.lushu(map, Path, opts)) may not be a collection of all distances, so can not locate the progress. You can directly return to the current progress of the coordinate point, the progress of their own positioning.
The movement of a road book trolley is to traverse the path collection through a timer, then clear the maker of the previous coordinate point and add the next maker. So, we can save the coordinate point of this change in the middle, and then provide a method to get it. Here is a pit is not the critical point, because the judgment of the timer to clear the conditions, not only to determine whether the coordinate point is finished, there are travel speed and the distance between the last few points to determine if there is a need to move the car. So at these critical points (start, end), you need to manually specify the value of the returned coordinate.
There's a lot of this change, no code.
Other:
1, as for the label, is in the mobile car when adding a monitoring event, add the corresponding information window. Then erase the last listener event on the next move.
2, speed adjustment, direct dynamic modification of the road book configuration parameters, not yet tested