使用复选框按名称过滤标记的传单

Question

我想按名称过滤我的标记，使用 map.addLayer(nameOfTheMarker) 和 map.remvoeLayer(nameOfTheLayer) 以及这样的复选框：

$('#markertoggle').change(function () {
    if (!this.checked) 
    //  ^
         map.addLayer(nameOfTheMarker);
    else 
        map.remvoeLayer(nameOfTheLayer;
});

我找到了一个带有过滤器示例的 jsfiddle，但我不知道如何将它应用到我的代码中：

var locations = [
['AB11 5HW','17','A',57.147701,-2.085442 ] ,
['AB11 8DG','3','B',57.129372,-2.090916 ]
];

var markersA = [];
var markersB = [];

//Loop through the initial array and add to two different arrays based on the specified variable
for(var i=0; i < locations.length; i++) {
    switch (locations[i][2]) {            
        case 'A' : 
            markersA.push(L.marker([locations[i][3], locations[i][4]]));
            break;        
        case 'B' :
            markersB.push(L.marker([locations[i][3], locations[i][4]]));
            break;
        default :
            break;
    }
}

//add the groups of markers to layerGroups
var groupA = L.layerGroup(markersA);
var groupB = L.layerGroup(markersB);

//background tile set
var tileLayer = {'Gray' : L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png')
};

var map = L.map('map', {
    center: new L.LatLng(57.0, -2),
    zoom: 9,
    layers: [tileLayer['Gray'], groupA, groupB] //change this to determine which ones start loaded on screen
});


//Control on the Top Left that handles the switching between A and B
var overlayMaps = {
    "A": groupA,
    "B": groupB
};
L.control.layers(tileLayer, overlayMaps, {position:'topleft'}).addTo(map);

http://jsfiddle.net/RogerHN/31v2afte/2/

我用来拉标记的函数：

function showMarkersByName(name) {
for (var i = 0; i < markers.resources.length; i++) {
    var resName = markers.resources[i].name;

    if (resName == name) {
        var resIcon = icons.resources[i].icon;
        var resSize = icons.resources[i].size;
        var resPname = icons.resources[i].pname;

        var customIcon = L.icon({
            iconUrl: resIcon,
            iconSize: resSize, // size of the icon
            iconAnchor:   [resSize[0]/2, resSize[1]/2], // point of the icon which will correspond to marker's location
            popupAnchor:  [2, -resSize[1]/2] // point from which the popup should open relative to the iconAnchor
        });

        for (var j = 0; j < markers.resources[i].coords.length; j++) {
            var x = markers.resources[i].coords[j].x;
            var y = markers.resources[i].coords[j].y;

            marker = L.marker([y, x], {icon: customIcon});
            marker.addTo(map).bindPopup(resPname);
            $(marker._icon).addClass(name)

        }
    }
}

我的标记结构与示例中的结构非常相似，我只是不知道我需要在我的函数中的哪个位置插入过滤器以按名称过滤标记，然后添加到图层以稍后切换它们使用上面的复选框。

我的完整代码在这里：http://plnkr.co/edit/UwAelIuUYz4OkoOG7zFn?p=preview

Answer 1

使用上面的示例和 iH8 提到的代码，我能够创建一个复选框来切换标记，并按名称过滤它们：

function initLayerGroups() {
  for (var i = 0; i < markers.resources.length; i++) {
    switch (markers.resources[i].name) {
      case 'GreenMarker':
        for (var j = 0; j < markers.resources[i].coords.length; j++) {
          var x = markers.resources[i].coords[j].x;
          var y = markers.resources[i].coords[j].y;

          marker = L.marker([y, x], {
            icon: getIcon(i)
          }).bindPopup(getPopupContent(i));

          markersGreen.push(marker);
        }
        break;
      case 'BlueMarker':
        for (var j = 0; j < markers.resources[i].coords.length; j++) {
          var x = markers.resources[i].coords[j].x;
          var y = markers.resources[i].coords[j].y;

          marker = L.marker([y, x], {
            icon: getIcon(i)
          }).bindPopup(getPopupContent(i));

          markersBlue.push(marker);
        }
        break;
      case 'RedMarker':
        for (var j = 0; j < markers.resources[i].coords.length; j++) {
          var x = markers.resources[i].coords[j].x;
          var y = markers.resources[i].coords[j].y;

          marker = L.marker([y, x], {
            icon: getIcon(i)
          }).bindPopup(getPopupContent(i));

          markersRed.push(marker);
        }
        break;
      default:
        break;
    }
  }

  groupGreen = L.layerGroup(markersGreen);
  groupBlue = L.layerGroup(markersBlue);
  groupRed = L.layerGroup(markersRed);
}

复选框：

<input type="checkbox" id="greenmarkertoggle"/>
<label for="greenmarkertoggle">Green Marker</label>

以及 javascript 显示或隐藏图层的代码：

$('#greenmarkertoggle').change(function() {
    if (this.checked)
      map.addLayer(groupGreen);
    else
      map.removeLayer(groupGreen);
});

下面是使用上述代码的完整工作示例：

http://plnkr.co/edit/GuIVhtFdtMDbmZdME1bV?p=preview

感谢 iH8 和上面的示例，我能够创建该函数并按其名称过滤标记。

使用复选框按名称过滤标记的传单

Leaflet filter markers by name using checkbox

javascript

filter

markers

leaflet