фильтровать маркеры на основе пользовательского ввода leaflet.js

Я пытаюсь отфильтровать свои маркеры на основе пользовательского ввода текста, но не знаю, как заставить его работать. Я использую 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';}

У меня уже есть окно поиска на моей странице, но я не знаю, как преобразовать результат в фильтр.


javascript leaflet user-input filtering search-box
person alice    schedule 13.04.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете добавить новый geojson, используя пользовательский ввод в качестве фильтра, используя прослушиватель событий или on («щелчок») или .submit, что-то, чтобы захватить ввод и поместить его в переменную, а затем вызвать функцию, которая добавляет новый geojson .

Что-то типа:

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

Вам придется удалить старые результаты и добавить новые, но это должно помочь вам начать работу.

person malcolm    schedule 14.04.2016