Leaflet隐藏过期开放参观标记方法或JSON返回结果过滤方案

问题原因梳理 #

1. 直接操作DOM修改标记样式不符合Leaflet的渲染逻辑：Leaflet在地图缩放、平移时会重新渲染所有标记元素，手动修改的DOM样式会被默认配置覆盖，导致隐藏效果失效。
2. 代码存在拼写错误：你写的dislpay是错的，正确属性名是display，这也是直接修改display不生效的直接原因。
3. 全局修改.leaflet-marker-icon类的样式会命中所有标记，无法针对单个过期标记做精准控制，所以会出现部分过期标记依然显示的问题。
4. 现有日期解析逻辑存在跨年漏洞：如果当前时间是1月，解析12月的开放日时会默认取当前年，导致把下一年的开放日错误判定为已过期。

最优解决方案 #

不要直接操作DOM，通过Leaflet原生的图层管理能力控制标记显隐，完全避免重绘失效问题，步骤如下：

1. 优化日期解析逻辑，修复跨年问题 #

const ophouse = ACTRIS_OpenHousePublicUpcoming;
// 拆分开放日字段
const [weekday, month, day] = ophouse.substr(8).split(/[\s,-]+/);
// 补全日的前导零，避免日期解析异常
const paddedDay = day.padStart(2, '0');
const currentDate = new Date();
const currentYear = currentDate.getFullYear();
// 先尝试用当前年解析日期
let openHouseDate = new Date(`${month} ${paddedDay} ${currentYear}`);
// 如果解析出来的日期早于当前时间，说明是下一年的开放日，年份+1
if (openHouseDate < currentDate) {
  openHouseDate = new Date(`${month} ${paddedDay} ${currentYear + 1}`);
}
// 对比用的基准日期，可按需修改
const compareDate = new Date("2021/09/21");

2. 用图层组统一管理所有房源标记 #

初始化地图时提前创建图层组，所有房源标记都统一添加到该图层组中：

// 初始化地图后创建房源标记图层组，添加到地图
const houseMarkerGroup = L.layerGroup().addTo(map);

3. 筛选未过期标记添加到图层 #

请求到接口数据后，遍历所有房源，只把未过期的标记添加到图层组，已过期的直接跳过不添加：

// 遍历接口返回的所有房源数据
houseData.forEach(item => {
  // 解析当前房源的开放日日期，得到openHouseDate
  // 仅未过期的房源生成标记加入图层
  if (openHouseDate >= compareDate) {
    const marker = L.marker([item.lat, item.lng]).addTo(houseMarkerGroup);
    // 绑定弹窗、自定义样式等其他逻辑可写在这里
    marker.bindPopup(`开放时间：${item.ACTRIS_OpenHousePublicUpcoming.replace('Public: ', '')}`);
  }
})

如果需要动态更新过期状态，直接调用houseMarkerGroup.clearLayers()清空图层，再重新遍历数据筛选添加即可，无论地图如何缩放平移，已过滤的过期标记都不会再渲染。

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