如何为Leaflet地图中的纯文本图例添加折叠功能？

不用依赖第三方插件，自己写几行代码就能搞定纯文本图例的折叠需求，具体实现如下：

1. 添加CSS样式 #

先写好控制折叠状态的样式，让按钮和图例内容的显示更美观：

.info.legend {
  padding: 6px 8px;
  background: white;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  border-radius: 5px;
}
.legend-toggle {
  cursor: pointer;
  font-weight: bold;
  margin-bottom: 8px;
  display: block;
}
.legend-content {
  display: none; /* 默认隐藏内容 */
}
.legend-content.show {
  display: block; /* 展开时显示 */
}

2. 修改图例的JavaScript代码 #

替换你原来的图例代码，添加折叠按钮和事件逻辑：

var legend = L.control({position: 'bottomright'});

legend.onAdd = function (map) {
  var div = L.DomUtil.create('div', 'info legend');
  
  // 添加折叠按钮
  var toggleBtn = L.DomUtil.create('span', 'legend-toggle', div);
  toggleBtn.textContent = '展开图例';
  
  // 添加图例内容容器
  var contentDiv = L.DomUtil.create('div', 'legend-content', div);
  
  // 原有图例内容生成逻辑
  var grades = ["1: ","2: "],
      labels = ["via Roma/Portela","piazza S. Maria Maggiore"];
  
  for (var i = 0; i < grades.length; i++) {
    contentDiv.innerHTML += grades[i] + labels[i] + '<br>';
  }
  
  // 绑定点击事件，防止事件冒泡到地图
  L.DomEvent.on(toggleBtn, 'click', function(e) {
    L.DomEvent.stopPropagation(e);
    contentDiv.classList.toggle('show');
    // 切换按钮文本
    toggleBtn.textContent = contentDiv.classList.contains('show') ? '收起图例' : '展开图例';
  });
  
  // 禁止地图在图例区域的事件响应
  L.DomEvent.disableClickPropagation(div);
  
  return div;
};

legend.addTo(map);

代码说明 #

• 用legend-toggle按钮作为开关，点击时切换legend-content的show类来控制显示/隐藏
• 通过L.DomEvent.stopPropagation和disableClickPropagation避免折叠按钮的点击事件影响地图操作
• 可以根据需求自定义CSS样式，比如调整按钮颜色、图例边框、间距等

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