我来帮你搞定这个自定义信息框的交互逻辑，其实很简单，只需要监听GeoJSON图层的点击事件，然后操作你已经写好的HTML容器就行。下面是具体的实现步骤：

1. 先确保信息框默认隐藏（可选但推荐） #

首先给你的.info-container加个默认隐藏的样式，这样页面加载时它不会显示出来，只有点击要素才出现：

.info-container {
  display: none;
  /* 保留你原来的样式，比如z-index这些 */
}

2. 监听GeoJSON图层的点击事件 #

假设你已经初始化了GeoJSON图层（比如变量叫geojsonLayer），给它绑定click事件，在事件处理函数里填充并显示信息框：

// 这里替换成你实际的GeoJSON图层变量
const geojsonLayer = L.geoJSON(yourGeoJsonData, {
  // 你的图层配置，比如点的样式等
}).addTo(map);

// 监听图层点击事件
geojsonLayer.on('click', function(e) {
  // 获取点击的要素的属性数据
  const featureProperties = e.feature.properties;
  
  // 获取信息框的内容容器和整体容器
  const contentContainer = document.getElementById('panoutext');
  const infoBox = document.getElementById('panoutitlu');
  
  // 填充信息内容——这里根据你的GeoJSON属性字段来修改！
  // 举个例子，如果你的要素有nume和descriere字段：
  contentContainer.innerHTML = `
    <div class="feature-detail">
      <h3>${featureProperties.nume || 'Nume necunoscut'}</h3>
      <p>${featureProperties.descriere || 'Nu există descriere'}</p>
      <!-- 可以添加更多属性字段，比如坐标： -->
      <small>Coordonate: ${e.latlng.lat.toFixed(4)}, ${e.latlng.lng.toFixed(4)}</small>
    </div>
  `;
  
  // 更新信息框标题（可选）
  const infoTitle = document.querySelector('.info-title h1');
  infoTitle.textContent = 'Detalii element selectat';
  
  // 显示信息框
  infoBox.style.display = 'block';
});

3. 点击地图空白处关闭信息框（可选优化） #

如果想要点击地图其他地方时关闭信息框，可以给地图绑定click事件：

map.on('click', function(e) {
  // 判断点击的目标是不是GeoJSON要素（避免点击要素时同时关闭）
  const isFeatureClick = e.originalEvent.target.closest('.leaflet-interactive');
  if (!isFeatureClick) {
    document.getElementById('panoutitlu').style.display = 'none';
  }
});

关键说明 #

• 一定要替换代码里的yourGeoJsonData为你实际的GeoJSON数据，还有属性字段（比如nume、descriere）要和你的GeoJSON里的字段对应。
• 如果你的信息框需要跟着点击的点移动，那还需要调整它的位置，比如根据e.latlng计算像素坐标，然后设置left和top样式，不过看你的HTML结构是固定容器，所以可能不需要这一步。
• 样式方面你可以自己调整.feature-detail这类自定义类的样式，让信息展示更美观。

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