Leaflet地图点击多边形显示文本框失败，求代码排查

核心问题分析 #

鼠标移至多边形显示可点击光标，但点击后文本框不显示，大概率是CSS优先级冲突或代码语法/执行时机问题，以下是具体排查和修复步骤：

1. 修复CSS优先级冲突 #

你的#box元素直接设置了display: none，即使移除.hidden类，元素本身的display: none依然生效，导致文本框无法显示：

修改后的CSS：

html,
body,
#map {
  width: 76%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#map {
  position: absolute;
  top: 0px;
  left: 0px;
}

#box {
  position: absolute;
  display: block; /* 默认显示，通过hidden类控制隐藏 */
  top: 0px;
  left: 1180px;
  width: 300px;
  height: 200px;
  z-index: 800;
  background-color: #f0f0f0;
  border: 2px solid #333;
  padding: 20px;
  font-size: 16px;
  color: #333;
  text-align: center;
  line-height: 1.5;
}

.hidden {
  display: none !important; /* 确保优先级覆盖默认样式 */
}

2. 检查多边形坐标与语法 #

你的代码中L.polygon([ ** Coordinates ** ])存在语法问题：

• 多边形坐标必须是二维数组（格式为[[纬度1,经度1], [纬度2,经度2], ...]）
• 确保括号完整闭合，无语法错误

正确的多边形示例：

var polygon = L.polygon([
  [51.509, -0.08],
  [51.503, -0.06],
  [51.51, -0.047]
]).addTo(map);
polygon.setZIndex(600);

3. 确保代码执行时机正确 #

如果JS代码在DOM元素加载前执行，document.getElementById("box")会返回null，导致无法操作元素。需将代码放在HTML末尾或用DOMContentLoaded包裹：

完整JS示例：

document.addEventListener('DOMContentLoaded', function() {
  // 先初始化地图实例
  var map = L.map('map').setView([51.505, -0.09], 13);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(map);

  // 创建多边形
  var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
  ]).addTo(map);
  polygon.setZIndex(600);

  // 点击事件处理函数
  function handlePolygonClick(event) {
    var boxElement = document.getElementById("box");
    if (boxElement) { // 确保元素存在
      boxElement.classList.remove("hidden");
      console.log("多边形已点击，文本框显示");
    }
  }

  // 绑定点击事件
  polygon.on("click", handlePolygonClick);

  // 添加标记点
  var marker = L.marker([51.505, -0.09]).addTo(map);

  // 检查标记点是否在多边形内
  var isWithin = polygon.getBounds().contains(marker.getLatLng());
  console.log(isWithin ? "Marker is within the polygon." : "Marker is outside the polygon.");
});

4. 调试技巧 #

打开浏览器控制台（F12）查看：

• 是否有语法报错（如未定义变量、括号不匹配）
• 点击多边形时是否输出console.log内容，确认事件是否触发
• document.getElementById("box")是否返回有效元素

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