Default Point Marker
This article explains how to add default point markers on the map surface.
Example of Adding Point Markers
1、Implementation Steps
1.1 Create Map
const map = new AMap.Map("container", {
viewMode: "3D",
zoom: 11,
showOversea: true, //Enable world Map
center: [77.19, 28.59],
});1.2 Add Marker instance
//Create a Marker instance:
const marker = new AMap.Marker({
position: new AMap.LngLat(77.19, 28.59),
title: "title",
});
//To add the created point marker to an existing map instance:
map.add(marker);To delete an existing Marker object use: map.remove(marker).
If you need to add multiple Marker instances at once, simply place each Marker instance into an array.
//An array consisting of multiple point instances
const markerList = [marker1, marker2, marker3];
map.add(markerList);This example only shows the addition of point markers. To modify the default icon of point markers, please refer to Custom Point Markers. For the use of point markers, we recommend using the AMap.Marker type to handle scenarios with data volumes of 500 or less. If the data volume is greater than 500, we recommend using AMap.LabelMarker. AMap.Marker offers more flexible custom configurations such as custom CSS styles compared to AMap.LabelMarker. In cases with a large number of points, AMap.LabelMarker can provide better performance.
1.3 Add events to Marker
//Create a click event for the point marker
marker.on("click", function (e) {
alert("You clicked Marker");
});