高德地图删除marker（指定marker）

107 阅读 0 评论 71 点赞

我是靠谱客的博主儒雅秋天，这篇文章主要介绍高德地图删除marker（指定marker），现在分享给大家，希望可以做个参考。

点击一个点位，生成一个marker

把所有点击过的点位，放入markerList数组

删除的时候，先清除所有marker,删除positionList数组里的某一项，再循环positionList把marker重绘出来

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var positionList = [] // 经纬度数组
var markerList = [] // marker列表
var marker
// 初始化地图
var map = new AMap.Map("container");
// 地图绑定点击事件
map.on('click', function (e) {
let arr = [e.lnglat.getLng(), e.lnglat.getLat()];
AddPoint(arr)
positionList.push(arr)
});
// 添加点位
function AddPoint (arr) {
let index = 1 + markerList.length // 序号
var content = '<div class="marker-icon">' + index + '</div>'; // 自定义marker
marker = new AMap.Marker({
content: content,
position: arr,//位置
})
markerList.push(marker)
map.add(marker);//添加到地图
}
document.getElementById("del").onclick = clearMarker;
// 删除某点位,并重绘
function clearMarker () {
map.remove(markerList); // 删除所有点位
positionList.splice(1, 1);
for (var i = 0, marker; i < positionList.length; i++) {
let index = 1 + i // 序号
var content = '<div class="marker-icon">' + index + '</div>'; // 自定义marker
marker = new AMap.Marker({
content: content,
position: positionList[i]
});
map.add(marker);
markerList.push(marker);
}
}