Question

我有一个传单地图，其中包含具有4个属性的GeojSON图层。我添加了4个搜索功能来分别过滤这些属性，但是现在我需要一个搜索功能，用户可以输入四个属性并进行组合查询。诸如AND操作之类的东西。如何修改代码以搜索多个属性？

这是我的代码段：

map.addControl(new L.Control.Search({
        layer: Points,        
        propertyName: 'Road Name',
        textPlaceholder:'Search by Road Name',
        moveToLocation: function(latlng, title, map) { console.log(latlng); map.setView(latlng, 16); }
        }));


        map.addControl(new L.Control.Search({
        layer: Points,        
        propertyName: 'Subcategor',
        textPlaceholder:'Search by Subcategory',
        moveToLocation: function(latlng, title, map) { console.log(latlng); map.setView(latlng, 16); }
        }));


        map.addControl(new L.Control.Search({
        layer: Points,        
        propertyName: 'Status',
        textPlaceholder:'Search by Status',

        moveToLocation: function(latlng, title, map) { console.log(latlng); map.setView(latlng, 16); }
        }));


        map.addControl(new L.Control.Search({
        layer: Points,        
        propertyName: 'Date Detec',
        textPlaceholder:'Search by Date',
        moveToLocation: function(latlng, title, map) { console.log(latlng); map.setView(latlng, 16); }
        }));

Popup Image

Answer 1

这是一个非常简单的解决方案，用于解决您的问题：http://jsfiddle.net/dbcy3vp0/

它主要使用filterData cb来“连接”多个搜索。

只需在搜索栏中输入“ 123”和“ foo”，然后看看发生了什么。

var controlFound1 = false, controlFound2 = false;

  var controlFunction = function()     
            {
        if(controlFound1 && controlFound2)         document.getElementById("target").innerHTML = "found"
        else
document.getElementById("target").innerHTML = "not found"
        };

    map.addLayer(markersLayer);
    var controlSearch = new L.Control.Search({
    propertyName:"bar",
        position:'topright',        
        layer: markersLayer,
        zoom: 15,
    moveToLocation:controlFunction,
    filterData:function(a,b) {   
        if(Object.keys(b).indexOf(a)>-1) controlFound1 = true;
      else controlFound1 = false;
    }
    });
  var controlSearch2 = new L.Control.Search({
    propertyName:"title",
        position:'topright',        
        layer: markersLayer,
        zoom: 15,
    moveToLocation:controlFunction,
    filterData:function(a,b) {   
        if(Object.keys(b).indexOf(a)>-1) controlFound2 = true;
      else controlFound2 = false;
    }
    });
    map.addControl( controlSearch );
  map.addControl( controlSearch2 );

  var marker = L.marker([51.5, -0.09],{title:"foo",bar:"123"}).addTo(markersLayer);

在传单地图中搜索多个属性

1 个答案: