Circle

AMap.Circle

Construct a circle object, specifying the circle style via CircleOptions

new AMap.Circle(opts: CircleOptions)

Tutorial

Parameter

opts (CircleOptions): Circle parameters

Attribute	Type	Description
center	LngLat	Center position, supports passing in a longitude and latitude object or a one-dimensional array of longitude and latitude, such as: new AMap.LngLat(77.19, 28.59) or [77.19, 28.59]
radius	number	Circle radius, unit: meters
zIndex	number	The stacking order of circular overlays. When multiple circular overlays are stacked on the map, this property ensures that the higher-level circular overlay is displayed on top, default value: 10
bubble	boolean	Whether to bubble the mouse or touch events of the overlay to the map (added since v1.3), default value: false
cursor	string	Specify the style when the mouse hovers over the circle. Custom styles should comply with CSS cursor property specifications. IE only supports cur/ani/ico formats, Opera does not support custom cursors
strokeColor	string	Outline color, assigned using hexadecimal color code. Default value: #00D3FC
strokeOpacity	number	Outline transparency, range [0 ~ 1], 1 means completely opaque, 0 means completely transparent. Default value: 0.9
strokeWeight	number	Outline width, default value: 2
fillColor	string	Circle fill color, assigned using hexadecimal color code, default value: #00B2D5
fillOpacity	number	Circle fill transparency, value range [0 ~ 1], 1 represents completely opaque, 0 represents completely transparent. Default value: 0.5
draggable	boolean	Set whether the circle is draggable, default value: false
height	number	Set whether the circle is drawn off the ground, default value is 0; when greater than 0, it is drawn off the ground, at which point the plane height of the circle equals the height value plus the centroid elevation of the Circle. The current plane height of the circle can be obtained through the getPlaneHeight method (this property is only applicable to JSAPI v2.1Beta and above).
extData	object	User-defined properties support any data type of JavaScript API, such as the id of Circle. Custom data can be saved on this property for subsequent operations.
strokeStyle	"solid" \| "dashed"	Outline line style, solid: "solid", dashed: "dashed", default value: "solid"
strokeDasharray	Array<number>	The style of the dashed line and gap that outlines the shape. This property is valid when strokeStyle is dashed, and it 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). Dot-dash line: [10,2,10], [10,2,10] represents a dashed line composed of 10 pixels of solid line and 2 pixels of blank + 10 pixels of solid line and 10 pixels of blank (repeatedly)

Demo

var circle = new AMap.Circle({
  center: new AMap.LngLat(100.491422, 13.749313), 
  radius: 1000, 
  borderWeight: 3, 
  strokeColor: "#FF33FF", 
});
map.add(circle);

Method

setCenter(center)

Set the center point of the circle

Parameter: center (LngLat) The center point of the circle, supports passing in a longitude and latitude object or a one-dimensional array of longitude and latitude, such as: AMap.LngLat(116.39,39.9) or [116.39, 39.9]

Demo:

circle.setCenter(new AMap.LngLat(100.491422, 13.749313));

setRadius(radius)

Set the radius of the circle

Parameter: radius (number) Radius of the circle

Demo:

circle.setRadius(100);

getCenter()

Get the center point of the circle

return value: (LngLat) Latitude and longitude information of the circle center

Demo:

circle.getCenter();

getRadius()

Get the radius of the circle

return value: (number) Radius of the circle

Demo:

circle.getRadius();

contains(point)

Determine if the specified point coordinates are inside the circle

Parameter: point (LngLatLike) Specified point coordinates

return value: (boolean) true (coordinates are inside the circle), false (coordinates are outside the circle)

Demo:

circle.contains(new AMap.LngLat(116.433322, 39.900255));

setOptions(optsArg)

Modifying the properties of a circle (including the nodes that form the circular outline, the style of the outline, etc. For details on the properties, refer to the CircleOptions list) does not support changing the center position

Parameter: optsArg (CircleOptions) Properties of a Circle

Demo:

circle.setOptions({
  borderWeight: 3, 
  strokeColor: "#FF33FF", 
});

hide()

Hide the circle

Demo:

circle.hide();

setHeight(height)

Set the height above ground of the circular plane (This method and related property height are applicable to JSAPI v2.1Beta and above)

Parameter: height (Number) Height above ground of the circular plane

Demo:

circle.setHeight(0);

getPlaneHeight()

Get the height above ground value of the circular plane (This method is applicable to JSAPI 2.1Beta and above)

return value: (Number) Height above ground of the circle's plane

Demo:

circle.getPlaneHeight();

show()

Display circle

Demo:

circle.show();

getExtData()

Get user-defined properties

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

Demo:

circle.getExtData();

setExtData(extData)

Set user-defined properties, supporting any data type in JavaScript API

Parameter: extData (Object) User-defined data

Demo:

circle.setExtData({id:1});

destroy()

Destroy Memory - Circle

Demo:

circle.destroy();

getArea()

Get Area of a Circle, Unit: Square Meters

return value: (number) Area of a Circle

Demo:

circle.getArea();

getOptions()

Get Properties of a Circle

return value: (CircleOptions) Properties of a Circle

Demo:

circle.getOptions();

getPath()

Get Circular Contour Node Array

return value: (Array<LngLat> | Array<Array<LngLat>>) Return Path

Demo:

circle.getPath();

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