Use Baidu Map API to make route track playback

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