Baidu map track development, how to draw polylines with arrows

  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

Guess you like

Origin www.cnblogs.com/qiantao/p/11526222.html