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

最新推荐文章于 2025-05-10 14:09:06 发布

原创最新推荐文章于 2025-05-10 14:09:06 发布 · 1w 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#高德地图

高德地图js 专栏收录该内容

17 篇文章

订阅专栏

这篇博客详细介绍了如何在地图上实现点击添加点位并存储，以及删除指定点位并重新绘制剩余点位的功能。通过监听地图点击事件，将经纬度坐标存入数组，并创建对应的marker。删除时，清除所有marker，从数组中移除目标点位，然后遍历更新后的数组重新绘制marker。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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);
  }

}