添加点标记 最后更新时间: 2024年01月25日
点标记是地图覆盖物中非常重要的要素之一，可以用来标记地图上的某个位置。JS API 支持多种类型的点标记，你可以根据需求来选择合适的类型。本文介绍如何在地图图面上添加自定义的点标记AMap.Marker。
自定义点标记示例
1、添加自定义点标记 Marker
1
1.1 准备
成为开发者并创建 key
为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击 具体操作。
提示
你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。
2
1.2 创建地图
const map = new AMap.Map("container", {
viewMode: "2D", //默认使用 2D 模式
zoom: 11, //地图级别
center: [116.397428, 39.90923], //地图中心点
});3
1.3 自定义Marker
Marker实例的内容content是可以自定义的，content属性值是字符串拼接的 DOM 元素。
//点标记显示内容
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>`自定义内容的样式
.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;
}4
1.4 创建Marker对象
提示
如果不知道如何确认经纬度前往 拾取坐标
const position = new AMap.LngLat(116.397428, 39.90923); //Marker 经纬度
const marker = new AMap.Marker({
position: position,
content: markerContent, //将 html 传给 content
offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
});提示
offset: new AMap.Pixel(-13, -30)，之所以为(-13，-30)，因为需要让上图以 [center bottom] 的方式扎在对应的经纬度上，上图是宽26px，高34px(去掉下部阴影为30px)，因此需要对自定内容做个offset的偏移(-13，-30)。
5
1.5 将Marker添加到地图上
map.add(marker);6
1.6 给 Marker 绑定事件
function clearMarker() {
map.remove(marker); //清除 marker
}
document.querySelector(".close-btn").onclick = clearMarker; //绑定点击事件将Marker从地图上移除：map.remove(marker)。
