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，我可以创建一个复选框来切换标记，按名称过滤它们：

- (IBAction)loginButton:(id)sender
{
  NSLog(@"Hello world");
}

复选框：

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);
}

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

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

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

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

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

使用复选框

1 个答案: