隐藏 Leaflet 上的标记 - 或 - 帮助过滤来自 json url 的结果

Question

我正在使用 Leaflet 根据我收到的数据在地图上显示即将开放的房屋，方法是从 URL.

中获取 JSON

我必须使用的唯一值是： “ACTRIS_OpenHousePublicUpcoming”：“Public：9 月 5 日星期日，3:00PM-5:00PM”

我可以使用以下方法将此日期转换为 2021 年 9 月 5 日：

ophouse = ACTRIS_OpenHousePublicUpcoming;    
const [weekday,month,day,h1,h2] = ophouse.substr(8).split(/[\s,-]+/);
var d = new Date();
var n = d.getFullYear();
var openhousedate = [month,day, n].join(" ");
var formatted = openhousedate;
const javaScriptRelease = new Date(formatted);
const javaScriptRelease2 = new Date("2021/09/21");

从这里开始，我试图通过隐藏 .leaflet-marker-icon class 来隐藏过去的任何标记。我添加了控制台日志以确保它正常工作并且每个结果都返回正确的日志（即过去或即将到来）。

 if (javaScriptRelease2 < javaScriptRelease) {
    console.log('open house in the future');
} else {
    console.log('open house in the past');
    $(".leaflet-marker-icon").css("dislpay", "none");
    $(".leaflet-shadow-pane").css("dislpay", "none");   
}

出于某种原因，这不起作用。如果我使用

，很多标记都被隐藏了

$(".leaflet-marker-icon").css("opacity", "0");

但结果中仍然出现过期的开放房屋。此外，当我缩放时，所有结果都会出现并且 none 被隐藏。

是否有更好的方法来隐藏这些标记？

这是我的完整代码的 JsFiddle...它不起作用，因为我必须隐藏 api 标记。 https://jsfiddle.net/planbjz/2aL0vbju/2/

Answer 1

当你有一个过期的数据点时，根本不要创建传单标记：

if (javaScriptRelease2 < javaScriptRelease) {
    console.log('open house in the future');
    // Create a corresponding Marker
    var marker = L.marker([element.Latitude, element.Longitude]).bindPopup('my content');
    markers.addLayer(marker);
} else {
    console.log('open house in the past');
    // Do nothing   
}

隐藏 Leaflet 上的标记 - 或 - 帮助过滤来自 json url 的结果

Hide markers on Leaflet -or- help filtering results from json url

javascript

leaflet

leaflet.markercluster