JS realize Baidu Map show multiple road book effect _jsp programming

This article introduces the JS implementation of the Baidu map also shows a number of road book effect, mainly to the bicycle return location as an example, the specific code is as follows:

Launch path book:

<script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=2.0&ak= own ak" ></script>
<script type= "Text/javascript" src= "Js/lushu.js" ></script><!--Road book-->

var bmaplib = window. Bmaplib = Bmaplib | |
{}; (function () {var b, a = b = A | |
  {version: "1.5.0"};
  A.guid = "$BAIDU $"; (function () {Window[a.guid] = Window[a.guid] | |
    {}; A.dom = A.dom | |
    {}; 
      A.DOM.G = function (e) {if ("string" = typeof E | | e instanceof string) {return document.getElementById (e)
        else {if (e && e.nodename && (e.nodetype = 1 | | e.nodetype = = 9)) {return E
    } return null};
    A.G = A.G = A.DOM.G; A.lang = A.lang | |
    {};
    a.lang.isstring = function (e) {return "[object String]" = = Object.prototype.toString.call (e)};
    a.isstring = a.lang.isstring;
    A.dom._g = function (e) {if (a.lang.isstring (e)) {return document.getElementById (E)} return E
    };
    A._g = A.dom._g;
      A.dom.getdocument = function (e) {e = A.DOM.G (e); return E.nodetype = = 9? e:e.ownerdocument | |
    E.document}; a.brOwser = A.browser | |
    {}; a.browser.ie = a.ie =/msie (\d+\.\d+)/i.test (navigator.useragent)?
    (Document.documentmode | | +regexp["\X241"]): undefined;
      A.dom.getcomputedstyle = function (f, e) {f = A.dom._g (f);
      var h = a.dom.getdocument (f), G;
        if (H.defaultview && h.defaultview.getcomputedstyle) {g = H.defaultview.getcomputedstyle (f, null);
    if (g) {return g[e] | | g.getpropertyvalue (e)}} return ""}; A.dom._stylefixer = A.dom._stylefixer | |
    {}; A.dom._stylefilter = A.dom._stylefilter | |
    [];
        A.dom._stylefilter.filter = function (f, j, K) {for (var e = 0, h = a.dom._stylefilter, g; g = h[e]; e++) {
    if (g = G[k]) {j = g (f, j)}} return J}; a.string = A.string | |
    {};
      A.string.tocamelcase = function (e) {if (E.indexof ("-") < 0 && E.indexof ("_") < 0) {return E Return E.replace (/[-_][^-_]/g, function (f) {return F.charat (1). toUpperCase ()})};
      A.dom.getstyle = function (g, f) {var i = A.dom;
      g = I.G (g);
      f = a.string.tocamelcase (f); var h = g.style[f] | | (G.currentstyle? G.currentstyle[f]: "") | |
      I.getcomputedstyle (g, f);
        if (!h) {var e = i._stylefixer[f];  if (e) {h = e.get e.get (g): A.dom.getstyle (g, E)}} if (E = i._stylefilter) {h
    = E.filter (F, H, ' get ')} return H};
    A.getstyle = A.dom.getstyle; A.dom._name_attrs = (function () {var e = {cellpadding: "cellpadding", cellspacing: "cellspacing"
        , colspan: "colspan", rowspan: "RowSpan", valign: "valign", Usemap: "Usemap",
      Frameborder: "frameborder"};
        if (A.browser.ie < 8) {e["for"] = "htmlfor";
        E["Class" = "ClassName"} else {e.htmlfor = "for"; E.claSsname = "Class"} Return E}) ();
      A.dom.setattr = function (f, E, g) {f = A.DOM.G (f);
        if ("style" = = e) {f.style.csstext = g} else {e = A.dom._name_attrs[e] | | e;
    F.setattribute (E, G)} return F};
    A.setattr = a.dom.setattr;
      A.dom.setattrs = function (g, e) {g = A.DOM.G (g);
    For (var f in e) {a.dom.setattr (G, F, e[f])} return g};
    A.setattrs = A.dom.setattrs; A.dom.create = function (g, E) {var h = document.createelement (g), F = e | |
      {};
    Return A.dom.setattrs (H, f)}; A.object = A.object | |
    {}; A.extend = A.object.extend = function (g, E) {for (Var f in e) {if (E.hasownproperty (f)) {G[f]
  = E[f]} return G}}) ();
    var c = Bmaplib.lushu = function (g, F, E) {if (!f | | F.length < 1) {return} This._map = g;
    This._path = f;
    this.i = 0; This._seTtimeoutquene = [];
    This._projection = This._map.getmaptype (). getprojection ();
    This._opts = {icon:null, speed:4000, Defaultcontent: ""};
    This._setoptions (e);
    this._rotation = 0;
  if (!this._opts.icon instanceof bmap.icon) {This._opts.icon = DefaultIcon}}; C.prototype._setoptions = function (e) {if (!e) {return} for (Var f in e) {if E.hasownpropert
  Y (f)) {this._opts[f] = e[f]}};
    C.prototype.start = function () {var f = this, E = f._path.length;
          if (f.i && f.i < e-1) {if (!f._frompause) {return} else {if (!f._fromstop) {
      F._movenext (++F.I)}}} else {f._addmarker ();
        F._timeoutflag = settimeout (function () {F._addinfowin ();
    if (f._opts.defaultcontent = = "") {F.hideinfowindow ()} f._movenext (F.I)}, 400)} This._frompause= false;
    This._fromstop = False}, C.prototype.stop = function () {this.i = 0;
    This._fromstop = true;
    Clearinterval (This._intervalflag);
    This._cleartimeout ();
  for (var g = 0, F = this._opts.landmarkpois, E = f.length; g < E; g++) {f[g].bshow = false}};
    C.prototype.pause = function () {clearinterval (This._intervalflag);
    This._frompause = true;
  This._cleartimeout ()};
  C.prototype.hideinfowindow = function () {this._overlay._div.style.visibility = "hidden"};
  C.prototype.showinfowindow = function () {this._overlay._div.style.visibility = "visible"}; A.object. Extend (C.prototype, {_addmarker:function (f) {if (this._
                Marker) {this.stop ();
                This._map.removeoverlay (This._marker); Cleartimeout (This._timeoutflag)} this._overlay && This._map.removeo Verlay (this._oVerlay);
              var e = new Bmap.marker (this._path[0]);
              This._opts.icon && E.seticon (This._opts.icon);
              This._map.addoverlay (e);
              E.setanimation (Bmap_animation_drop);
              This._marker = e}, _addinfowin:function () {var f = this;
              var e = new D (f._marker.getposition (), f._opts.defaultcontent);
              E.setrelatedclass (this);
              This._overlay = e; This._map.addoverlay (E)}, _getmercator:function (e) {return This._map.getmaptype (
              ). getprojection (). Lnglattopoint (E)}, _getdistance:function (f, e) { Return Math.sqrt (Math.pow (f.x-e.x, 2) + Math.pow (F.Y-E.Y, 2))}, _move : Function (n, j, m) {var i = this, h = 0, E = ten, F = this._opts.speed/(1000/e), L = this._projection. Lnglattopoint (n), k = This._projection. Lnglattopoint (j), G = M
              Ath.round (I. _getdistance (l, K)/F);
                if (g < 1) {I._movenext (++I.I); return} I._intervalflag = SetInterval (function () {if (H >= G)
                      {clearinterval (I._intervalflag); if (I.i > I._path.length) {return} i._movenext (+ +
                      I.I)} else {h++; var o = m (l.x, k.x, H, g), r = m (L.y, K.y, H, g), q = i._projection.
                      Pointtolnglat (New Bmap.pixel (O, R));
                        if (h = = 1) {var p = null; if (i.i-1 >= 0) {p = i._path[i.i-1]} if (I._opts.enabler Otation = = True) {i.setrotation (P, N, j)} if (
                            I._opts.autoview) {if (!i._map.getbounds (). Containspoint (q)) {
                      I._map.setcenter (q)}}
                      } i._marker.setposition (q); I._setinfowin (q)}}, E)}, Setrotation:function (L, F, M)
              {var j = this;
              var e = 0;
              f = J._map.pointtopixel (f);
              m = J._map.pointtopixel (m);
                if (m.x!= f.x) {var k = (M.Y-F.Y)/(m.x-f.x), G = Math. Atan (k);
           E = G * 360/(2 * math.pi);     if (M.x < f.x) {e =-e + + +} else {e =-E
                } j._marker.setrotation (-e)} else {var h = m.y-f.y;
                var i = 0;
                if (H > 0) {i =-1} else {i = 1} J._marker.setrotation (i *)} return}, Linepixellength:functio 
                  N (f, e) {return math.sqrt (Math.Abs (f.x-e.x) * Math.Abs (f.x-e.x) + math.abs (F.Y-E.Y) * Math.Abs (F.Y-E.Y))}, Pointtopoint:function (f, e) {return
            Math.Abs (f.x-e.x) * Math.Abs (f.x-e.x) + math.abs (f.y-e.y) * Math.Abs (F.Y-E.Y)},
              _movenext:function (e) {var f = this;
      if (E < this._path.length-1) {          F._move (F._path[e], f._path[e + 1], f._tween.linear)}},
              _setinfowin:function (g) {var f = this; if (!f._overlay) {return} f._overlay.setposition (g, F._marker.geticon (). Size
              );
              var e = F._troughpointindex (g);
                if (e!=-1) {clearinterval (F._intervalflag);
                F._overlay. sethtml (f._opts.landmarkpois[e].html);
                F._overlay.setposition (g, F._marker.geticon (). size);
            F._pauseforview (e)} else {f._overlay.sethtml (f._opts.defaultcontent)}
              }, _pauseforview:function (e) {var g = this; var f = settimeout (function () {G._movenext (++G.I)}, G._opts.landmarkpois[e].pausetime * 10
              00); G._settImeoutquene.push (f)}, _cleartimeout:function () {for [Var e in This._settimeoutq Uene) {cleartimeout (this._settimeoutquene[e])} this._settimeoutquene.length  = 0}, _tween: {linear:function (F, J, H, i) {var e = f, L = J-
                F, G = h, k = i; Return L * g/k + e}}, _troughpointindex:function (f) {var h = th
              Is._opts.landmarkpois, J; for (var g = 0, E = h.length g < e; g++) {if (!h[g].bshow) {j = This._map.getdista
                  NCE (New Bmap.point (H[G].LNG, H[g].lat), F);
                    if (J < ten) {h[g].bshow = true;
  Return g}} return-1}}); Function d (e, f) {this._point = E;
  this._html = f} d.prototype = new Bmap.overlay ();
              D.prototype.initialize = function (e) {var f = This._div = A.dom. Create ("div", { Style: "Border:solid 1px #ccc; Width:auto;min-width:50px;text-align:center;position:absolute;background: #fff; co
    Lor: #000; font-size:12px;border-radius:10px;padding:5px;white-space:nowrap; "});
    f.innerhtml = this._html;
    E.getpanes (). Floatpane.appendchild (f);
    This._map = e;
  return F}; D.prototype.draw = function () {this.setposition (This.lushumain._marker.getposition (), This.lushumain._marker.
  GetIcon (). size)}; A.object.extend (D.prototype, {setposition:function (H, i) {var f = this._map.pointtooverlaypixel (h), E = a.do
      M.getstyle (This._div, "width"), G = A.dom GetStyle (this._div, "height");
  Overlayw = parseint (This._div.clientwidth | | e, ten), Overlayh = parseint (This._div.clientheight | | g, 10);    This._div.style.left = F.X-OVERLAYW/2 + "px";
    This._div.style.bottom =-(F.y-i.height) + "px"}, Sethtml:function (e) {this._div.innerhtml = e},
 Setrelatedclass:function (e) {this.lushumain = e}})}) ();

function Showallrecord (starttime,endtime) {//Show multiple start end times of the bike path book Var bikeid=null;
  $.getjson ("./getbickidservlet", function (JSON) {Bikeid = json;//all bike numbers});
  var json={"StartTime": starttime,//start Time "Endtime": endtime//End Time}; Create two-dimensional arrays, such as pointarray[i] in I bike number, pointarray[i][j] for all loaned site information of bicycles numbered I $.getjson ("./getallrecordservlet", {json:
    Json.stringify (JSON)},function (JSON) {var j = 0;
    var stationlonlist=new Array ();
    var stationlatlist=new Array ();
    var pointarray=new Array ();
    var bikeidlist = new Array ();
      for (var i = 0; i < bikeid.length i++) {Stationlonlist[i] = new Array ();
      Stationlatlist[i] = new Array ();
      Pointarray[i] = new Array (); Bikeidlist[i] = Bikeid[i].
    Bikeid; The var tt = Json.length < 200?json.length:200;//If a query comes out with more than 200 bike debits, then 200 is displayed.
        (to be perfected) for (var row = 0; row < pointarray.length; row++) {while (J < tt) {var k = j;
        var p = 0; var Stationlon = ParsefLoat (Json[j]. Stationlon)//String type convert to float type stationlonlist[row][p]=stationlon;//put Stationlon in stationlonlist var St Ationlat = parsefloat (Json[j].
        Stationlat); stationlatlist[row][p]=stationlat;//put Stationlat into stationlatlist pointarray[row][p] = new BMap.Point (stationlon,s
        Tationlat); while (bikeidlist[row] = = json[k + 1].
          Bikeid) {k++;
          p++; stationlon= parsefloat (json[k). Stationlon)//String type converted to float type stationlonlist[row][p]=stationlon;//put Stationlon in Stationlonlist St ationlat= parsefloat (json[k).
          Stationlat); Stationlatlist[row][p] =stationlat;//put Stationlat in stationlatlist pointarray[row][p] = new BMap.Point (Stationlo
        n, Stationlat);
        } addmarkertest (Pointarray,row);//Add marker dot j = k + 1;
      Break var bikespeedtest = speedtest (Pointarray,row);//speed of each bicycle road book Polylinetest (pointarray,row,stationlonlist,statio nlatlist);//each bike lends return to the site paintingLine Lushutest (pointarray,bikespeedtest,row,stationlonlist,stationlatlist);//Bicycle Borrow the road book path of the site} map.setviewport (
  Pointarray);
});

 }

function Speedtest (pointarray,row) {//depending on the time difference between bicycles to show the speed of the road book (to be perfected) var distance = 0;//Straight-lane path length for (var i = 0; i < P Ointarray[row].length-1; i++) {distance + = (map.getdistance (pointarray[row][i],pointarray[row][i+1));//bike loan return path length of the site {distance/20;/ /speed = path length/time (fixed at this time, can be changed to the time read by the database)}//function Polylinetest (pointarray,row,stationlonlist,stationlatlist) {var
  points = new Array (); for (var i = 0; i < pointarray[row].length i++) {points[i] = new Bmap.point (parsefloat (stationlonlist[row][i)), par
  Sefloat (Stationlatlist[row][i])); //Increase the line between dots var polyline = new Bmap.polyline (points, {strokecolor:getcolor (), Strokeweight:2, Stro keopacity:0.5}); Create a polyline map.addoverlay (polyline);
  Draw Polyline}//function Lushutest (pointarray,bikespeedtest,row,stationlonlist,stationlatlist) {var points = new Array (); for (var i = 0; i < pointarray[row].length i++) {points[i] = new Bmap.point (parsefloat (stationlonlist[row][i)), p Arsefloat (Stationlatlist[row][i])); var Lushu = new Bmaplib.lushu (map, points, {defaultcontent: "", autoview:true,//whether to turn on automatic field adjustment, if opened then the book in the movement process will automatically adjust the icon:new bmap.icon (' Photo/bike.png ', New Bmap.size (), {anchor:new bmap.size (10, 25)}) According to the field of vision  
  ,//Enablerotation:true,//whether to set marker with the direction of the road to rotate Speed:bikespeedtest,});
Lushu.start ();
  The random color function sj16 () {var sjshu=math.round (Math.random () *10*2) of the polyline is generated;
  do {Sjshu=math.round (Math.random () *10*2);
  }while (SJSHU&GT;=14);
return Sjshu;
  function GetColor () {var hex = [' 1 ', ' 2 ', ' 3 ', ' 4 ', ' 5 ', ' 6 ', ' 7 ', ' 8 ', ' 9 ', ' A ', ' B ', ' C ', ' D ', ' E ', ' F ';
  var yanse= "";
  For (i=0 i<6; i++) {yanse+=hex[sj16 ()];

 Return "#" +yanse}

Effect Chart:

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.