Baidu Map API draws the leading arrow of the polyline

Source:

<! DOCTYPE html>body, HTML, #allmap {width:100%;height:100%;overflow:hidden;margin:0;} #l-map{height:100%;width:78%;float: left;border-right:2px solid #bcbcbc;} #r-result{height:100%;width:20%;float: Left;} </style> <script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=1.4" ></script> <title> draw a polyline with arrows </title> varMap =NewBmap.map ("Allmap"); varPoint =NewBmap.point (116.404, 39.915); Map.centerandzoom (Point,15); Map.addcontrol (NewBmap.navigationcontrol ());    Map.enablescrollwheelzoom (); varLineList =NewArray ();//record the lines to be drawn    varArrowlinelist =NewArray ();//record the drawn arrow lines    varIsfirstload =false;//is the first time the load is loaded, the first load does not trigger the purge event    varArrowlinelengthrate = 15/10;//15 is the first time you set the map display range, 10 is the length of the arrows you set at the initial time, the local map zoom to reduce the length of the arrow line to ensure consistent    varPolyline =NewBmap.polyline ([NewBmap.point (116.425, 39.91936),        NewBmap.point (116.405, 39.920)], {strokecolor:"Blue", Strokeweight:3, strokeopacity:0.5});    Map.addoverlay (polyline); Linelist[linelist.length]= Polyline;//record the lines to be drawnArrowlinelist[arrowlinelist.length] = Addarrow (POLYLINE,10,MATH.PI/7);//record drawn arrow linevarMarker =NewBmap.marker (NewBmap.point (116.405, 39.920));//Create a calloutMap.addoverlay (marker);//add a callout to a mapMarker.setanimation (bmap_animation_bounce);//Bouncing AnimationsIsfitstload=true;//First time loading        /** * On the Baidu map to draw the line to add arrows * @param polyline linear var line = new Bmap.polyline ([Faydpoint,daohdpoint], {strokecolor: "b     Lue ", Strokeweight:3, strokeopacity:0.5}); * @param length of the arrow line is generally ten * @param anglevalue the angle between the arrow and the line is generally MATH.PI/7*/    functionAddarrow (Polyline,length,anglevalue) {//function to draw arrows        varLinepoint=polyline.getpath ();//the coordinate string of the line        varArrowcount=linepoint.length;  for(varI =1;i<arrowcount;i++) {//draw arrows at inflection point            varPixelstart=map.pointtopixel (linepoint[i-1]); varPixelend=Map.pointtopixel (Linepoint[i]); varAngle=anglevalue;//the angle between the arrow and the main line            varR=length;//R/math.sin (angle) represents the arrow length            vardelta=0;//Main Line slope, no slope at vertical            varparam=0;//Simple Code Considerations            varPixeltemx,pixeltemy;//Temporary Point coordinates            varPixelx,pixely,pixelx1,pixely1;//Arrow two points            if(pixelend.x-pixelstart.x==0) {//when the slope does not existpixeltemx=pixelend.x; if(pixelend.y>pixelstart.y) {Pixeltemy=pixelend.y-R; }                Else{Pixeltemy=pixelend.y+R; }                    //Right triangle two point coordinates and one angle are known, and another point coordinate algorithm is obtained .pixelx=pixeltemx-r*Math.tan (angle); PixelX1=pixeltemx+r*Math.tan (angle); PixelY=pixely1=Pixeltemy; }            Else  //when the slope is present{Delta= (PIXELEND.Y-PIXELSTART.Y)/(Pixelend.x-pixelstart.x); PARAM=MATH.SQRT (delta*delta+1); if((pixelend.x-pixelstart.x) <0)//second to third quadrant{pixeltemx=pixelend.x+ R/param; Pixeltemy=pixelend.y+delta*r/param;                }                Else//first to fourth quadrant{pixeltemx=pixelend.x-r/param; Pixeltemy=pixelend.y-delta*r/param;                }                //Right triangle two point coordinates and one angle are known, and another point coordinate algorithm is obtained .pixelx=pixeltemx+ Math.tan (angle) *r*delta/param; Pixely=pixeltemy-math.tan (angle) *r/param;pixelX1=pixeltemx-math.tan (angle) *r*delta/param; Pixely1=pixeltemy+math.tan (angle) *r/param;            }            varPointarrow=map.pixeltopoint (NewBmap.pixel (pixelx,pixely)); varPointarrow1=map.pixeltopoint (NewBmap.pixel (pixelx1,pixely1)); varArrow =NewBmap.polyline ([Pointarrow, Linepoint[i], PointArrow1], {stroke Color:"Blue", Strokeweight:3, strokeopacity:0.5});            Map.addoverlay (Arrow); returnArrow; }    }        //Map Load Complete eventMap.addeventlistener ("tilesloaded",function(){        //alert ("Map loading Complete");        if(!isfirstload) {            //map.clearoverlays ();//Clear All coverings            //clears the last drawn arrow line, does not clear the last arrow line, and the arrow line zooms in when the local map zooms in.             for(vari=0; i<arrowlinelist.length; i++) {Map.removeoverlay (arrowlinelist[i]);//clear the formulated cover, can be straight line, callout, etc.} arrowlinelist.length= 0; //Redraw Arrow Lines             for(vari=0; i<linelist.length; i++) {Arrowlinelist[arrowlinelist.length]= Addarrow (LINELIST[I],15/ARROWLINELENGTHRATE,MATH.PI/7);//record the drawn arrow lines}} isfirstload=false;        }); //Click to get the latitude and longitude of the clickMap.addeventlistener ("click",function(e) {alert (e.point.lng+ "," +E.point.lat); });</script>

Refer to someone else's code for a modified effect,

Baidu Map API draws the leading arrow of the polyline