Polyline

Construct a polyline object and specify its style via PolylineOptions

new AMap.Polyline(opts:PolylineOptions )

Tutorial

Parameter

opts (PolylineOptions): Polyline parameters

Attribute	Type	Description
path	Array<LngLat> \| Array<Array<LngLat>>	Polyline path, supports lineString and MultiLineString
zIndex	number	The stacking order of polyline overlays. When multiple overlays overlap on the map, this property ensures higher-level overlays are displayed on top, default: 10
bubble	boolean	Whether to bubble mouse or touch events of the overlay to the map (added in v1.3), default: false
cursor	string	Specify the style when the mouse hovers over the polyline. Custom styles should comply with the CSS cursor property specification. IE only supports cur/ani/ico formats, Opera does not support custom cursors
strokeColor	string	Line color, assigned using hexadecimal color code. Default value: #00D3FC
strokeOpacity	number	Line opacity, range [0 ~ 1], 1 means completely opaque, 0 means completely transparent. Default value: 0.5
strokeWeight	number	Line width, default value: 2
isOutline	boolean	Whether to display the stroke, default value: false
borderWeight	number	Stroke width, default value: 1
outlineColor	string	Line stroke color, this item is only valid when the isOutline attribute is true, default value: #00B2D5
draggable	boolean	Set whether the line is draggable, default value: false
height	number	Set whether the polyline is drawn off the ground, default value: 0. When greater than 0, it is drawn off the ground, and the height of the polyline equals the height attribute value plus the absolute elevation of the polyline's starting point. The current polyline height can be obtained via getPolylineHeight() (this attribute applies to JSAPI v2.1 and above).
extData	object	User-defined attributes, supporting any data type of JavaScript API, such as Polyline id, etc. Custom data can be saved on this attribute for convenient subsequent operations.
strokeStyle	"solid" \| "dashed"	Line style, solid line: "solid", dashed line: "dashed", default value: "solid"
strokeDasharray	Array<number>	The style of dashes and gaps for outlining shapes, this property is valid when strokeStyle is dashed, this property is valid in ie9+ browsers. Values: Solid line: [0,0,0] Dashed line: [10,10], [10,10] represents a dashed line composed of 10 pixels of solid line and 10 pixels of blank (repeatedly) Dotted line: [10,2,10], [10,2,10] represents 10 pixels of solid line and 2 pixels of blank + 10 pixels of solid line and 10 pixels of blank (repeatedly) composed dashed line
lineJoin	"miter" \| "round" \| "bevel"	The drawing style of the polyline corners, default value: 'miter' sharp corner, other options: 'round' round corner, 'bevel' beveled corner
lineCap	"butt" \| "round" \| "square"	The drawing style of the line caps at both ends of the polyline, default value: 'butt' no cap, other options: 'round' round cap, 'square' square cap
geodesic	boolean	Whether to draw as a geodesic, default value: false
showDir	boolean	Whether to display white direction arrows along the path, default value: false. It is recommended to use when the polyline width is greater than 6

Demo

//Configure polyline path
var path = [
  new AMap.LngLat(100.207151, 13.965977),
  new AMap.LngLat(100.286802, 13.648579),
  new AMap.LngLat(100.771573, 13.681939),
  new AMap.LngLat(100.823758, 13.804665),
];
//Create Polyline instance
var polyline = new AMap.Polyline({
  path: path,
  strokeWeight: 2, 
  strokeColor: "red", 
  lineJoin: "round", 
});
map.add(polyline);

Method

hide()

Hide polyline

Demo:

polyline.hide();

show()

Show polyline

Demo:

polyline.show();

getExtData()

Get user-defined attributes

return value: (Object) The value set in the extData property, returns an empty object if not set

Demo:

polyline.getExtData();

getOptions()

Get the properties of the line

return value: (PolylineOptions) Properties of the line

Demo:

polyline.getOptions();

getPath()

Get the array of nodes in the polyline path

return value: (Array<LngLat> | Array<Array<LngLat>>) Array of nodes in the polyline path

Demo:

polyline.getPath();

setExtData(extData)

Set User-Defined Properties, Supporting Any Data Type in JavaScript API

Parameter: extData (Object) User-Defined Data

Demo:

polyline.setExtData({id:1});

setHeight(height)

Set Polyline Height Above Ground (This method and related property height are applicable to JSAPI v2.1Beta and above)

Parameter: height (number) Polyline Height Above Ground

Demo:

polyline.setHeight(0);

destroy()

Destroy Memory - Polyline

Demo:

polyline.destroy();

getBounds()

Get the rectangular range object of the current polyline

return value: (Bounds) The rectangular range that completely contains the polyline (latitude and longitude coordinates of the southwest and northeast corners)

Demo:

polyline.getBounds();

setPath(path?)

Set the node array that composes this polyline, supports single polyline (LngLatLike[]) and multiple polylines (LngLatLike[][])

Parameter: path (Array<LngLatLike> | Array<Array<LngLatLike>>) Polyline path, supports lineString and MultiLineString

Demo:

var path = [
  new AMap.LngLat(116.368904, 39.913423),
  new AMap.LngLat(116.382122, 39.901176),
  new AMap.LngLat(116.387271, 39.912501),
  new AMap.LngLat(116.398258, 39.9046),
];
polyline.setPath(path);

moveWithPos(dx, dy)

Set the movement position of the line

Parameter:

dx (number) The distance moved on the x-axis (horizontal direction), where positive values indicate movement to the right and negative values indicate movement to the left

dy (number) The distance moved on the y-axis (vertical direction), where positive values indicate upward movement and negative values indicate downward movement

Demo:

polyline.moveWithPos(10, 10);

getLength(isTerrain)

Get the total length of the polyline (in meters)

Parameter: isTerrain (boolean) Whether to measure distance based on terrain. Default: false

return value: (number) Return the total length of the polyline

Demo:

polyline.getLength(false);

setOptions(optsArg)

Modify polyline properties (including nodes of the path, line style, whether to draw a geodesic line, etc. For details of the properties, refer to the PolylineOptions list). Modifying the path is not supported. To modify the path, call the setPath(path) method

Parameter: optsArg (PolylineOptions) Configured polyline properties

Demo:

polyline.setOptions({
  strokeWeight: 5, 
  strokeColor: "#000", 
});

contains(point)

Determine whether the coordinate is within the polyline

Parameter: point(Vector2 | LngLat) The coordinate point to be judged, such as: AMap.LngLat(116.39,39.9) or [116.39, 39.9]

return value: (boolean) true included, false not included

Demo:

polyline.contains(new AMap.LngLat(116.39, 39.9));

getPolylineHeight()

Get the current elevation value of Polyline (This method is applicable to JSAPI 2.1Beta and above)

return value: (number) Elevation value of Polyline

Demo:

polyline.getPolylineHeight();

Event

Event Name	Description
hide	Triggered when the overlay is hidden
show	Triggered when the overlay is displayed
click	Left Mouse Click Event
dblclick	Left Mouse Double Click Event
rightclick	Right Mouse Click Event
mousedown	Event triggered when the mouse is pressed on a point marker
mouseup	Event triggered when the mouse is pressed and then released on a point marker
mouseover	Mouse over
mouseout	Mouse out
touchstart	Event triggered when touch starts, only applicable to mobile devices
touchmove	Event triggered during touch movement, only applicable to mobile devices
touchend	Event triggered when touch ends, only applicable to mobile devices

For event object property descriptions, go to:MapsEvent