如何通过事件监听移除MapboxGL地图中的所有弹窗？

先明确你遇到问题的原因：

• 调用popup.remove()提示未定义：因为popup变量的作用域仅限于创建它的代码块，mySelect的change事件回调无法访问到该变量。
• 通过document.getElementsByClassName("mapboxgl-popup")获取空元素：Mapbox弹窗元素可能未完成DOM渲染，且Mapbox内部对弹窗的管理不依赖直接操作DOM，这种方式不稳定。

推荐的两种可靠解决方法： #

方法一：管理弹窗实例作用域（单弹窗场景）

如果仅创建了一个弹窗，将popup变量声明在全局或事件回调可访问的外层作用域：

// 外层作用域声明popup
let popup;

// 创建弹窗的代码
popup = new mapboxgl.Popup({closeOnClick: true, offset: [20, 0]});

// mySelect的change事件回调
document.getElementById('mySelect').addEventListener('change', function() {
  if (popup) {
    popup.remove();
  }
});

方法二：通过地图实例获取所有弹窗（多弹窗场景）

如果存在多个弹窗或不确定弹窗数量，直接使用Mapbox地图实例的getPopups()方法获取所有关联弹窗，遍历移除：

// 假设你的地图实例为map
document.getElementById('mySelect').addEventListener('change', function() {
  const popups = map.getPopups();
  popups.forEach(popup => {
    popup.remove();
  });
});

该方法是Mapbox官方支持的方式，能确保所有关联当前地图的弹窗都被移除，比直接操作DOM更可靠。

内容的提问来源于stack exchange，提问作者DiamondJoe12