Leaflet中GeoJSON图层标记点击弹窗仅首次生效问题求助

嘿，这种弹窗只弹一次的情况我之前也碰到过，大概率是图层重复叠加或者事件绑定冲突导致的，给你几个针对性的解决办法：

1. 先清除旧图层，避免重复叠加 #

每次调用showMarkets加载新数据时，一定要先把之前的市场图层从地图上移除，不然同一个位置会有多层标记叠加，第二次点击可能被旧图层拦截，导致弹窗没反应。

修改你的代码，在发起AJAX请求前先处理旧图层：

function showMarkets() {
  // 清除已存在的市场图层
  if (mapLayers.markets) {
    map.removeLayer(mapLayers.markets);
    mapLayers.markets = null;
  }

  $.ajax({
    url: '/API/GetMarketsWithStatus',
    dataType: 'json',
    async: true,
  }).done(function (geoData) {
    // 后续创建geoJSON图层的代码
    mapLayers.markets = L.geoJSON(geoData, {
      onEachFeature: function(feature, layer) {
        // 弹窗绑定逻辑
      }
    }).addTo(map);
  });
}

2. 用Leaflet内置的bindPopup管理弹窗 #

不要手动绑定click事件来控制弹窗，Leaflet的bindPopup方法会自动处理弹窗的显示/隐藏逻辑，避免重复绑定事件导致的冲突。

正确的弹窗绑定方式：

onEachFeature: function(feature, layer) {
  // 拼接弹窗内容，注意转义特殊字符
  const popupContent = `
    <h3>${feature.properties.name || '无名称'}</h3>
    <p>状态：${feature.properties.status || '未知'}</p>
    <!-- 其他需要展示的属性 -->
  `;
  // 直接绑定弹窗，Leaflet会自动处理点击事件
  layer.bindPopup(popupContent);
}

3. 检查弹窗内容的HTML合法性 #

如果属性值里包含特殊字符（比如双引号、尖括号），直接插入HTML会导致语法错误，弹窗可能渲染失败。可以加一个转义函数处理：

// 定义HTML转义函数
function escapeHTML(str) {
  if (!str) return '';
  return str.replace(/[&<>"']/g, match => {
    const escapeMap = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#039;'
    };
    return escapeMap[match];
  });
}

// 使用转义后的内容
const popupContent = `
  <h3>${escapeHTML(feature.properties.name)}</h3>
  <p>状态：${escapeHTML(feature.properties.status)}</p>
`;

4. 手动绑定事件时先移除旧监听（可选） #

如果你必须自定义点击逻辑，一定要先移除已有的click事件监听，再绑定新的，防止多次绑定导致冲突：

onEachFeature: function(feature, layer) {
  const popupContent = `<!-- 弹窗内容 -->`;
  const popup = L.popup().setContent(popupContent);
  
  // 先移除旧的点击事件
  layer.off('click');
  // 绑定新的点击事件
  layer.on('click', function() {
    this.openPopup(popup);
  });
}

按照上面的步骤修改后，应该就能解决同一标记再次点击弹窗不显示的问题啦！

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