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

时间:2016-04-13 16:47:14

标签: javascript filtering leaflet user-input search-box

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

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

1 个答案:

答案 0 :(得分:1)

您可以使用用户输入作为过滤器添加新的geojson,使用事件侦听器或on('click')或.submit,获取输入并将其放入变量,然后调用添加的函数新的geojson。

类似的东西:

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

您必须删除旧结果并添加新结果,但这应该让您开始。