Document Maps JavaScript API Advanced Tutorial Line Polyline

Polyline

AMap.Polyline can be used to draw polylines. This article introduces how to draw a polyline on a map and set properties such as width, stroke color, and line style.

Example of drawing a polyline

1、Draw a polyline

1

1.1 Create Map

const map = new AMap.Map("container", {
  zoom: 10, 
  center: [100.491422, 13.749313],
  showOversea: true, //Enable world Map
  mapStyle: "amap://styles/whitesmoke", 
  viewMode: "2D", 
});
2

1.2 Array of node coordinates for the polyline

//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),
];
3

1.3 Create a Polyline instance

var polyline = new AMap.Polyline({
  path: path,
  strokeWeight: 2, 
  strokeColor: "red", 
  lineJoin: "round", //Polyline turning point connection style
});
4

1.4 Add a polyline to the map instance

map.add(polyline);
Prompt
  • Removal of polylines
//Remove a created polyline
map.remove(polyline);
//Remove multiple created polylines at once
var polylines = [polyline1, polyline2, polyline3];
map.remove(polylines);
  • Show and hide polylines
//Show a Created Polyline
polyline.show();
//Hide a Created Polyline
polyline.hide();

2、Description of properties and methods involved in this chapter

2.1 AMap.Polyline

parameters/methods

Description

Type

Description description

Default

center

Path of the line chart

Array<LngLat> 

Latitude and longitude object or one-dimensional array composed of latitude and longitude

-

strokeWeight

Stroke width

Number

-

2

strokeColor

Outline Color

String

assign using hexadecimal color code

'#00D3FC'

lineJoin

Drawing style of line chart inflection points

String

Optional value:'miter' |

'round' |

'bevel'

'miter'

polyline.show()

Display line chart

Function

-

-

polyline.hide()

Hidden polyline

Function

-

-