In a recent development Baidu map, we need to draw the trajectory of pedestrians, and use the arrow indicates the direction in the track, and when we usually use Baidu map navigation, as by arrows indicate the direction of people walking.
By Baidu Maps API, we can find a way to easily crossed Polyline (), but how do we draw the line, showing the direction of the arrow it? Check Baidu Maps API found IconSequence class, which is used to set the symbol displayed on the polyline.
Combined with Baidu Maps API:
Therefore, we can achieve draw polylines with the direction of the arrow.
// Create a map var Map = new new BMap.Map ( 'Map' ); var Point = new new BMap.Point (114.065537,22.553321 ); map.centerAndZoom (Point, 13 is ); map.enableScrollWheelZoom (); // coordinate point Points = [ {LNG: 114.014, LAT: 22.687 }, {LNG: 114.0143, LAT: 22.742 }, {LNG: 114.09746, LAT: 22.745 } ] // draw an arrow and style var SY = new newBMap.Symbol (BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, { Scale: 0.6, // icon scaled sizes strokeColor is: '# FFF', // set the target line fill color vector strokeWeight: 2, // The line-width }); var iconsThe = new new the BMap. IconSequence (SY, '100%', '10% ', to false ); // set to true, the track can be edited // draws a polyline, and style var the TrackLine = new new BMap.Polyline (potArr, { strokeColor is: "# 18a45b " // set the color strokeWeight:. 8, // width strokeOpacity: 0.8, // polyline transparency in the range 0 - 1 enableEditing: false , // line editing is enabled, the default is false enableClicking: false , // whether to respond to a click event, the default is to true iconsThe: [iconsThe] } ); the Map.addOverlay (the TrackLine);
Results as shown:
Original link: https://blog.csdn.net/qq_36727756/article/details/89184935