Baidu Map API depicts vehicle historical trajectory map

Recently, the company in the project needs: the vehicle positioning in the map to show the history of the track function

The first use of Google's Map API, but found that will be closed, simply support the domestic, using the Baidu map API

Search method to connect two points to the line, there will be the beginning and end of the icon, but need to ask only the first point and the last point is the beginning and the end, the middle of all the car design

My point of view is to cover the starting point of the search line, but there is a problem with the suspension pop-up layer after the overlay, so I'm going to write off the layer that holds the starting and ending points,

But the map rendering takes time, I took 2 seconds to execute, put the start and end of the icon div empty, so I can,

Of course, who knows how to remove or replace the beginning and end of the icon, you can tell me, so you can not draw a point,

It's going to be easy.

The code in my project, the offense reference,

Bit brief code:

Initialize Map
function Initmap () {
Map = new Bmap.map ("Allmap");//Create a map instance
Locate the Map center according to the logged-in person unit
var belongorgname = $ (). GetUser () ["Belongorgname"];
Point = new Bmap.point (114.928715, 27.418907); Create point coordinates
Map.centerandzoom (belongorgname,8);//Initialize map, set center point coordinates and map level.
Map.enablescrollwheelzoom ()//enable wheel Zoom Out
Map.addcontrol (New Bmap.navigationcontrol ()); Add a Panning Zoom control
Map.addcontrol (New Bmap.scalecontrol ()); Add a scale control
Map.addcontrol (New Bmap.overviewmapcontrol ()); Add a thumbnail map control

}

The following-----Line code is the code for drawing and points,

Data is a background-encapsulated JSON data I obtained via Ajax, each of which represents:

/*0 = ID
1 = unit ID
2 = device Encoding
3 = Latitude
4 = Longitude
5 = Latitude Hemisphere
6 = Longitude Hemisphere
7 = ground Speed
8 = ground Heading
9 = declination
10 = declination Direction
11 = Humidity
12 = temperature
13 = Acquisition Time
14 = Data State
15 = location Time str
16 = car Name
17 = Model
18 = License plate number
19 = unit Name

------------------------------------------------------

$.ajax ({
Url:url,
Type: "POST",
Async:false,
DataType: "JSON",
Data:{deviceid:deviceid,orientationtimestart:orientationtimestart,orientationtimeend:orientationtimeend},
Success:function (data) {
if (data!=null) {
Traversing the vehicle trajectory set, drawing a line of dots
for (var i = 0; i < data.length; i++) {
var s = data[i].split (",");
var Snext;
if (i==data.length-1) {
Snext = null;
}else{
Snext = Data[i+1].split (",");
}

Draw a Point
var scontent =
"<div class= ' city_bg ' style= ' Background-image:url (" +$ (). GetParam (' Stylepath ') +name[3]+ "); font-size:12px; ' > "+
"<table style= ' magin-top:10px;magin-left:10px;height:100%;width:100%; ' > "+
"<tr>" +
"<td style= ' width:60px" align= ' right ' > Model: "+s[17]+" </td> "+
"<td style= ' width:80px;text-align:center; ' align= ' right ' > Temperature:" +s[11]+ "℃" + "</td>" +
"</tr>" +
"<tr>" +
"<td style= ' width:60px; ' align= ' right ' > license plate number:" +s[18]+ "</td>" +
"<td style= ' width:80px;text-align:center; ' align= ' right ' > Humidity:" +s[12]+ "%" + "</td>" +
"</tr>" +
"<tr>" +
"<td style= ' width:60px ' align= ' right ' colspan= ' 2 ' > Acquisition time:" +s[13].substring (0,19) + "</td>" +
"</tr>" +
"<tr>" +
"<td style= ' width:60px; ' align= ' right ' colspan= ' 2 ' > Location time:" +s[15]+ "</td>" +
"</tr>" +
"</table>" +
"</div>";
var colorstr = "";
if ("1" ==s[14]) {
COLORSTR = "green";
}
if ("2" ==s[14]) {
Colorstr = "Red";
}
if ("3" ==s[14]) {
Colorstr = "Yellow";
}
var marker = new Complexcustomoverlaycar (new Bmap.point (s[3), s[4]), "", scontent,colorstr,s[19],s[20],s[21]);
Map.addoverlay (marker);

Draw Line
if (Snext!= null) {
var driving = new Bmap.drivingroute (map, {renderoptions:{map:map, autoviewport:true}});
Driving.search (New Bmap.point (s[3], s[4)), New Bmap.point (snext[3), snext[4]);
}
}
Reset start point location Map Center, not sure if it works
Map.centerandzoom (New Bmap.point (Data[0].split (",") [3], Data[0].split (",") [4]), 12);
}
}
});

Here I am using synchronized Ajax, because,

2 seconds to clear the start point icon, do not imitate (because I have not found the way to change the icon)
settimeout (function () {
$ ("span.") Bmap_noprint "). Parent (). remove ();
}, "2000");

-----------------------------

Add Vehicle location information
function Complexcustomoverlaycar (point,text,scontent,color,title,isstart,isend) {
This._point = point;
This._text = text;
This._scontent=scontent;
This._color=color;
This._title=title;
This._isstart=isstart;
This._isend=isend;
}
Complexcustomoverlaycar.prototype = new Bmap.overlay ();
ComplexCustomOverlayCar.prototype.initialize = function (map) {
var searchinfowindowcar = new Bmaplib.searchinfowindow (map, this._scontent, {
Title:this._title,//title
Width:60,//width
height:115,//height
Panel: "Panel",
Background: $ (). GetParam (' stylepath ') + '/resources/imgs/s_div.png ',
Enableautopan:true,//Automatic translation
Searchtypes: []
});
This._map = map;
var div = This._div = document.createelement ("div");
Div.style.position = "absolute";
Div.style.zIndex = BMap.Overlay.getZIndex (This._point.lat);
div.style.cursor= "Pointer";
Div.appendchild (document.createTextNode (This._text));

if ("Y" ==this._isstart) {//is the starting point
if (this._color== "red") {
$ (div). addclass ("Map_car_start_chaowen");
}else if (this._color== "green") {
$ (div). addclass ("Map_car_start_zhengchang");
}
}
if ("Y" ==this._isend) {//is the endpoint
if (this._color== "red") {
$ (div). addclass ("Map_car_end_chaowen");
}else if (this._color== "green") {
$ (div). addclass ("Map_car_end_zhengchang");
}
}
if ("Y"!=this._isstart && "y"!=this._isend) {//Not the starting point is not the endpoint
if (this._color== "red") {
$ (div). addclass ("Map_car_jinggao");
}else if (this._color== "green") {
$ (div). addclass ("Map_car_zhengchang");
}
}

var that= this;
Div.onmouseover = function () {
if (this._color== "red") {
$ (div). addclass ("Map_car_jinggao");
}else if (this._color== "yellow") {
$ (div). addclass ("Map_car_chaoshi");
}else if (this._color== "green") {
$ (div). addclass ("Map_car_zhengchang");
}
Open suspension had
Searchinfowindowcar.open (New Bmap.marker (That._point));
};
Div.onmouseout = function () {
if (this._color== "red") {
$ (div). Removeclass ("Map_car_jinggao");
}else if (this._color== "yellow") {
$ (div). Removeclass ("Map_car_chaoshi");
}else if (this._color== "green") {
$ (div). Removeclass ("Map_car_zhengchang");
}
Close the suspended layer
Searchinfowindowcar.close (New Bmap.marker (That._point));
};

Map.getpanes (). Labelpane.appendchild (Div);

return div;
};
ComplexCustomOverlayCar.prototype.draw = function () {
var map = This._map;
var pixel = Map.pointtooverlaypixel (this._point);
This._div.style.left = pixel.x-17+ "px";
This._div.style.top = pixel.y-40+ "px";
};