在 Mapbox GL JS 中更新 Popup 数据答案

【问题标题】：Update Popup data in Mapbox GL JS在 Mapbox GL JS 中更新 Popup 数据
【发布时间】：2020-02-10 22:17:59
【问题描述】：

我正在使用 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()};
  }

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

谢谢

【问题讨论】：

标签： mapbox mapbox-gl-js mapbox-gl

【解决方案1】：

如果不了解您是如何在应用程序上下文中调用 createPopUp 方法的，就很难准确诊断出问题所在。我不确定为什么每次地图移动时都会创建一个新的弹出窗口，所以听起来您可能会在 Map#on('move') 事件中调用此方法。话虽如此，我假设您正在迭代所有功能并为每个功能调用createPopUp 方法以初始化所有弹出窗口。

我建议不要使用var popUps = document.getElementsByClassName('mapboxgl-popup'); 生成的 DOM 节点数组，而是在初始化时为每个功能的弹出元素指定一个唯一且可重现的类名。看起来您的每个功能都有一个 dev_id 属性，因此您可以执行以下操作：

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

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

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

【讨论】：