1. Use Baidu Map API to make track play;
It can be applied to the map application scenarios such as vehicle tracking, driving line replay, running itinerary recording, etc.
1.1 Draw a static trajectory diagram
Get multiple trace point points (must contain longitude, latitude)
Connect adjacent 2 points using the Polyline object (note that the number of polyline is 1 less than point)
1.2 Drawing a dynamic trajectory graph (fixed interval time)
Read a track point every 500 milliseconds for A/b two function
A add a polyline
b Move the marker from the previous point to the current
The main method uses the SetTimeout method iteration to implement the dynamic loop
Polyline is added in each iteration of the loop body, and the marker movement can be achieved by means of the 2 method:
First, use Removeoverlay to remove the original marker and add a new marker at the current point
This was the method that was thought of when the project was done, because the thought inertia of addoverlay was used when drawing the polyline, and the addoverlay was used to do the loop iteration when the marker was drawn.
Window.run = function () {
var pts ={?????} Array of points you get to a series (via GPS or other interface)
var paths = Pts.length; Get a few points
var carmk = new Bmap.marker (Pts[0],{icon:myicon});
Map.addoverlay (CARMK);
i=0;
function Removemkpoint (i) {
if (I < paths) {//
SetTimeout (function () {
i++;
Map.removeoverlay (CARMK);//clear the previous marker
Removemkpoint (i);
},100);
}
}
SetTimeout (function () {
Resetmkpoint (5);
},100)
});
}
SetTimeout (function () {
Run ();
},1500);
Second, use the marker SetPosition method to reset the location of the marker
After the completion of the project, I read a document of the Baidu API, found that the official demo using the SetPosition method can be a good way to achieve marker mobile function
Window.run = function () {
var pts ={?????} Array of points you get to a series (via GPS or other interface)
var paths = Pts.length; Get a few points
var carmk = new Bmap.marker (Pts[0],{icon:myicon});
Map.addoverlay (CARMK);
i=0;
function Resetmkpoint (i) {
Carmk.setposition (Pts[i]);//reset marker position
if (I < paths) {
SetTimeout (function () {
i++;
Resetmkpoint (i);
},100);
}
}
SetTimeout (function () {
Resetmkpoint (5);
},100)
});
}
SetTimeout (function () {
Run ();
},1500);
Note: The OPTs property of marker can customize marker's icon (auto, people, etc.), rotation direction, size, offset and so on, in addition to the Setanimation method can also set the animation effect.
1.3 Drawing Polyline
The trajectory line is a combination of a polyline, so you simply add a polyline each time you add a marker, and you don't need to clear in the next iteration loop, and the first and last 2 endpoints of each polyline are the points of the current and previous time periods.
Var pts0, previous point var pts1 current point
var carpl=new bmap.polyline ([pts0,pts1],{strokecolor: ' Blue ', strokeweight:4,strokeopacity:0.8});
Map.addoverlay (CARPL);
pts0=pts1;//the current point changes to the previous point after each add polyline
1.4 Add Play button control to control track playback
Adding a custom playback control, where you need to use the prototype property to return a reference to the object type prototype, gives an understanding of prototype
For example: A.prototype = new B ();
Understanding prototype should not confuse it with inheritance. A's prototype is an example of B, and it's understandable that a will clone the methods and properties in B all over again. The emphasis here is on cloning rather than inheritance, the difference being that the prototype of a is an instance of B, while the prototype of B may also be an instance of a.
A can use the methods and properties of B, when there is a method named F in a, B, an instance of a instance call this F method (INSTANCE.F) will be a self-contained F method instead of the F method of B, if an instance of a instance want to invoke the F method of B, You need to use the call method to do this: first a new instance of B var binstance=new b (); Binstance.f.call (instance);
function Playcontrol () {
Default docking position and offset
This.defaultanchor = Bmap_anchor_bottom_right;
This.defaultoffset = new Bmap.size (10, 40);
}
Inherit from Bmap.control with JavaScript's prototype property
Playcontrol.prototype = new Bmap.control ();
The custom control must implement its own initialize method and return the DOM element of the control
In this method, you create an INPUT element as a container for the control and add it to the map container
PlayControl.prototype.initialize = function (map) {
Create a DOM element
var input = document.createelement ("input");
Input.id= "Playctrl";
Input.type= "image";
Input.src= "Image/play.png";
Input.onclick=startplay ();//startplay start settimeout iteration for the previous step
};
Adding DOM elements to the map
Map.getcontainer (). appendchild (input);
Returns the DOM element
return input;
};
Creating controls
var Myplayctrl = new Playcontrol ();
Add to map
Map.addcontrol (Myplayctrl);
1.5 The play button is designed so that you can click to toggle the play and Stop buttons
Define a variable var i=0, when the onclick event is triggered, I will switch between 0 and 1, according to the value of I to determine the execution start playback method and stop method.
The Stop playback method can be implemented by cleartimeout (provided that the SETTIMEOUT statement is assigned as a string in the previous Start method) and uses Removeoverlay to clear traces that occur during playback.
Input.onclick=function () {
if (i==0) {
Startplay ();//Play Started
Input.src= "Image/pause.png";
I=1;
}else{
Pauseplay ();//Playback stop
Input.src= "Image/play.png";
i=0;
}
};
1.6 Adding a playback speed control
The previous step adds a play switch, and you can also add playback speed controls on this basis to adjust how fast or slow the playback
The method is similar to the method of adding a play switch in 1.4, where input type is a range (new type in HTML 5), by reading the value of range, the value is used as the settimeout time parameter (as a parameter to the playback method),
Note: When the sliding range,value changes, to make the playback stop, click the Play button again, the playback method to read the new value;
Input.id= "Speedctrl";
Input.type= "Range";
input.max= "1750";
Input.min= "250";
input.step= "250";
input.value= "1000";
var i=0;
Input.onchange=function () {
Pauseplay ();
}
Summarize:
As a novice from the school just came out of the non-computer professional front-end, internship in the first start-up project, there is an independent use of the Baidu Map API Opportunity is lucky. From the specific use of Baidu Map API practice, I learned a lot, in addition to Baidu Map API, but also learned including prototype, Bootstrap (modal box, DateTimePicker, validation and other plug-ins) and so on.
Although some imperfect places (for example: in the Infowindow content can not use bootstrap modal frame, etc.), but the function of Baidu Map API is still very powerful, worthy of the vast number of novice learning. In particular, with the rapid development of mobile internet and a variety of intelligent devices with GPS positioning features of the explosion, more and more maps, positioning categories, the use of the map API will be more and more demand.
In order to better practice Baidu map, I intend to use the holiday free time using Baidu map to make a small game practiced hand, the game roughly conceived as follows: (the future will be in the blog to show you!) )
1. Use custom marker as the protagonist of the game
2. Use a custom control to manipulate the protagonist
3. Set up a level or task,
4. Calculate a reward or score
5. Setting barriers
First of all to achieve these primary functional requirements, you can make their own game protagonist in their city walk!
Use Baidu Map API to make route track playback