AMap.CircleMarker
Construct a circular marker object, specify the circular marker style through CircleMarkerOptions
new AMap.CircleMarker(opts: CircleMarkerOptions)
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
