根据用户输入的leaflet.js过滤标记

filter markers based on user input leaflet.js

本文关键字：js 过滤 leaflet 用户 输入      更新时间：2024-06-28

我正在尝试根据用户文本输入过滤标记，但不确定如何使其工作。我使用的是javascript和leaflet.js。这是一个带有硬编码过滤器的代码示例，但我希望能够根据用户输入过滤数据。

    var stops = L.geoJson(points, {
    onEachFeature: function (feature, layer) //functionality on click on feature
    {
    layer.bindPopup(String('Stop Name:' + ' ' + feature.properties.Stop_Name + '</br>' + 'Route:' + ' ' + feature.properties.Route)); 
    layer.on('mouseover', function (e) {
        this.openPopup();
    });
    layer.on('mouseout', function (e) {
        this.closePopup();
    });

    }
    , filter: function(feature, layer) {
    return feature.properties.Route == '10';
}});

有设置的方法吗

    filter:function(feature, layer){ return feature.properties.Route == 'USER INPUT';}

我的页面上已经有一个搜索框，但不知道如何将结果解析到过滤器中。

您可以使用用户输入作为过滤器，使用事件监听器或on（'click'）或.submit添加一个新的geojson，获取输入并将其放入变量中，然后调用一个添加新geojson的函数。

类似于：

function onSubmit() {
  var results = L.geoJson(null, {
    filter: function(feature, layer) {
      return feature.properties.zonecode == userinput;
    }
  }).addTo(map);
  results.addData(stops.toGeoJSON());
}

你必须删除旧的结果并添加新的结果，但这应该让你开始。

相关文章：