更新Mapbox GL JS中的弹出数据

我正在用Mapbox GL JS制作一个车队跟踪器，它从GeoJson获取数据并插入地图，作为添加实时数据，我还集成了Mapbox商店定位器示例，现在我可以实时更新边栏和地图上的点。我想做的一个修改不是只显示一个弹出窗口，而是为每个图标显示一个弹出窗口。我想知道如何更新这个弹出窗口，因为我制作它的方式是在对象的每一个移动中创建一个新的弹出窗口，但不是关闭前一个。这是我用于弹出窗口的函数

function createPopUp(currentFeature, data) {     
    var popUps = document.getElementsByClassName('mapboxgl-popup');
    //if (popUps[0]) popUps[0].remove();
    //  mapboxgl.Popup.remove();

    if (map.getZoom() > 9) {
    var popup = new mapboxgl.Popup({closeOnClick: false})
      .setLngLat(currentFeature.geometry.coordinates)
      .setHTML('<h3> Aeronave: '+ currentFeature.properties.dev_id + '</h3>' +
        '<h4> Curso: ' + currentFeature.properties.curso + 'º<br> Altitude: ' + currentFeature.properties.alt + ' ft<br> Sinal: ' + currentFeature.properties.rssi +'</h4>')
      .addTo(map)
      .setMaxWidth("fit-content(10px)");
      } else{if (popUps[0]) popUps[0].remove()};
  }

函数createPopUp（currentFeature，数据）{
var popUps=document.getElementsByClassName（'mapboxgl-popup'）；
//如果（弹出窗口[0]）弹出窗口[0]。删除（）；
//mapboxgl.Popup.remove（）；
if（map.getZoom（）>9）{
var popup=new mapboxgl.popup（{closeOnClick:false}）
.setLngLat（当前特征.几何图形.坐标）
.setHTML（'Aeronave:'+currentFeature.properties.dev_id+'+
'光标：'+currentFeature.properties.Curso+'º
海拔：'+currentFeature.properties.alt+'英尺
Sinal:'+currentFeature.properties.rssi+''）
.addTo（地图）
.setMaxWidth（“适合内容（10px）”）；
}else{if（弹出窗口[0]）弹出窗口[0].remove（）}；
}

如果我取消对弹出窗口[0]行的注释，它将只允许显示1个弹出窗口，我还尝试通过活动跟踪设备的数量动态更改[]之间的数字，它减少了弹出窗口的数量，但仍会重复一些具有一个ID的弹出窗口。此外，我还尝试通过.addClasName更改类名，但没有成功

---

谢谢

如果不了解在应用程序上下文中如何调用

createPopUp

方法，就很难准确诊断出问题所在。我不确定为什么每次地图移动时都会创建一个新的弹出窗口，所以听起来您可能在事件中调用此方法。也就是说，我假设您正在迭代所有功能，并为每个功能调用

createPopUp

方法，以便初始化所有弹出窗口

而不是使用由

var popUps=document.getElementsByClassName（'mapboxgl-popup'）生成的DOM节点数组，我建议在初始化时为每个特性的弹出元素指定一个唯一且可复制的类名。看起来您的每个功能都有一个
dev\u id
属性，因此您可以执行以下操作：

var popup = new mapboxgl.Popup({closeOnClick: false, className: `mapbox-gl-popup-${dev_id}`})

如果将来需要更改特定功能的弹出窗口，可以创建一个helper函数来检索相关的DOM节点：

function retrievePopUp(feature) {
  return document.getElementsByClassName(`mapboxgl-popup-${feature.properties.dev_id}`);
}