CircleMarker 最后更新时间: 2026年07月02日

AMap.CircleMarker

Construct a circular marker object, specify the circular marker style through CircleMarkerOptions

new AMap.CircleMarker(opts: CircleMarkerOptions)

Tutorial

Parameter

opts (CircleMarkerOptions): Circular marker parameters

Attribute	Type	Description
center	LngLat	Center position, supports passing in a longitude and latitude object or a one-dimensional array composed of longitude and latitude, such as: new AMap.LngLat(77.19, 28.59) or [77.19, 28.59]
radius	number	Circle radius, unit: px, maximum value: 64
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 in v1.3), default value: false
cursor	string	Specify the style when the mouse hovers over the circle. Custom styles should comply with the CSS cursor property specification. IE only supports cur/ani/ico formats, Opera does not support custom cursors
topWhenClick	boolean	When the mouse clicks on the circlemarker, whether to place it on the top layer to highlight it. Default value: false, not on top. If set to true, the circlemarker will be placed above other markers when clicked, making it more visible to the user
strokeColor	string	Contour line color, assigned using hexadecimal color code. Default value: #00D3FC
strokeOpacity	number	Contour line transparency, range [0 ~ 1], 1 represents completely opaque, 0 represents 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 opacity, 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
extData	object	User-defined attributes, supporting any data type of JavaScript API, such as the id of CircleMarker, etc

Demo

var circleMarker = new AMap.CircleMarker({
  center: new AMap.LngLat(100.473569, 13.838336),
  radius: 10, //Unit:px
  strokeColor: "white", 
});
//Add the circular CircleMarker object to the Map
map.add(circleMarker);

Method

contains(point)

Determine if the specified point coordinates are inside the circle

Parameter: point (LngLatLike) Specified point coordinates

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

Demo:

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

hide()

Hide the dot

Demo:

circleMarker.hide();

setRadius(radius)

Set the radius of the dot

Parameter: radius (number) Radius of the dot

Demo:

circleMarker.setRadius(10);

getCenter()

Get the center of the dot

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

Demo:

circleMarker.getCenter();

getRadius()

Get the radius of the dot

return value: (number) Radius of the dot

Demo:

circleMarker.getRadius();

show()

Show the dot

Demo:

circleMarker.show();

setOptions(optsArg)

Properties of the dot (including style, outline, fill color, etc.), the center position of the dot cannot be modified

Parameter: optsArg (CircleMarkerOptions) Properties of the dot

Demo:

circleMarker.setOptions({
  fillColor: "rgba(0,0,255,1)",
});

getOptions()

Get the properties of the dot

return value: (CircleMarkerOptions) Properties of the circle marker

Demo:

circleMarker.getOptions();

getExtData()

Get user-defined properties

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

Demo:

circleMarker.getExtData();

getCurAltitude()

Get the absolute height of the current CircleMarker

return value: (number) Absolute height of CircleMarker

Demo:

circleMarker.getCurAltitude();

setExtData(extData)

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

Parameter: extData (Object) User-defined Data

Demo:

circleMarker.setExtData({id:1});

destroy()

Destroy Memory - CircleMarker

Demo:

circleMarker.destroy();

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