Circular Marker
This article introduces the circular marker AMap.CircleMarker, which can display circular marker points on the map and allows customization of its position and size.
Example of Dot Marker
Prompt
The AMap.CircleMarker class and the AMap.Circle class can both draw circular overlays on the map. The difference is that AMap.Circle is a vector graphics class, which changes size with map zoom; while the AMap.CircleMarker class does not change with map zoom, but it has less performance consumption. If you want to represent a circular marker, it is recommended to use AMap.CircleMarker. If you want to represent a circular area, it is recommended to use AMap.Circle.
1、Add a circular marker
1
1.1 Create Map
const map = new AMap.Map("container", {
viewMode: "2D",
zoom: 11,
mapStyle: "amap://styles/whitesmoke",
showOversea: true, //Enable world Map
center: [100.491422, 13.749313],
});2
1.2 Set the center position and radius
var center = new AMap.LngLat(100.473569, 13.838336);
var radius = 10 //Unit:px3
1.3 Create an instance of the circular CircleMarker
//Create an instance of the circular point marker CircleMarker
var circleMarker = new AMap.CircleMarker({
center: center,
radius: radius,
strokeColor: "white",
strokeWeight: 2,
strokeOpacity: 0.5,
fillColor: "rgba(0,0,255,1)",
fillOpacity: 0.5,
zIndex: 10,
cursor: "pointer",
});4
1.4 Add the circular circleMarker object to the Map
//Add the circular CircleMarker object to the Map
map.add(circleMarker);
//Adjust the overlay to the appropriate field of view
map.setFitView([circleMarker]);Prompt
To delete an existing circleMarker object, use: map.remove(circleMarker).
5
1.5 Add Event to CircleMarker
//Add Mouse Enter Event to Point Marker
circleMarker.on("mouseover", function () {
console.log("Mouse Enter");;
});