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

Question

我正在尝试根据用户文本输入过滤我的标记，但不确定如何让它工作。我正在使用 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';}

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

Answer 1

您可以使用用户输入作为过滤器，使用事件监听器或在(“单击”)或.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());
}

您必须删除旧结果并添加新结果，但这应该可以帮助您开始。