Add point marker
Point markers are one of the very important elements in map overlays, they can be used to mark a certain location on the map. JS API supports multiple types of point markers, you can choose the appropriate type according to your needs. This article describes how to add custom point markers AMap.Marker to the map surface.
Custom Point Marking Example
1、Add custom point marker Marker
1.1 Create a map
const map = new AMap.Map("container", {
viewMode: "2D",
zoom: 11,
showOversea: true, //Enable world Map
center: [77.193045, 28.59086],
});1.2 Custom Marker
The content of a Marker instance can be customized, and the content property value is a concatenated string of DOM elements.
//Point marker display content
const markerContent = `<div class="custom-content-marker">
<img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">
<div class="close-btn" onclick="clearMarker()">X</div>
</div>`Customize the style of content
.custom-content-marker {
position: relative;
width: 25px;
height: 34px;
}
.custom-content-marker img {
width: 100%;
height: 100%;
}
.custom-content-marker .close-btn {
position: absolute;
top: -6px;
right: -8px;
width: 15px;
height: 15px;
font-size: 12px;
background: #ccc;
border-radius: 50%;
color: #fff;
text-align: center;
line-height: 15px;
box-shadow: -1px 1px 1px rgba(10, 10, 10, .2);
}
.custom-content-marker .close-btn:hover{
background: #666;
}1.3 Create a Marker object
const position = new AMap.LngLat(77.193045, 28.59086);
const marker = new AMap.Marker({
position: position,
content: markerContent, //Pass the html to content
offset: new AMap.Pixel(-13, -30), //Take the [center bottom] of the icon as the origin
});
offset: new AMap.Pixel(-13, -30), the reason for (-13, -30) is to make the above image anchored at the corresponding latitude and longitude in the [center bottom] way, the above image is 26px wide and 34px high (30px without the lower shadow), so an offset of (-13, -30) is needed for the custom content.
1.4 Add a Marker to the map
map.add(marker);1.5 Bind events to Marker
function clearMarker() {
map.remove(marker);
}
document.querySelector(".close-btn").onclick = clearMarker; Remove the Marker from the map: map.remove(marker).