使用.setFilter和Mapbox API的Javascript问题

我正在使用Mapbox的API在地图上加载标记，我希望根据是否选中与标记颜色对应的复选框来显示不同的标记

我的data.geoJSON文件如下所示：

{ 
  "type": "FeatureCollection",
  "features": [ { 
    "type": "Feature",
    "geometry": { 
      "type": "Point", 
      "coordinates": [13.353323936462402, 38.11200434622822]
    },
    "properties": {
      "marker-color": "#9c89cc", 
      "marker-color": "#3b5998"
    }
  } ]
}

我的HTML如下所示：

<div id='filters' class='ui-select'>
  <input type='checkbox' checked=checked class='filter' name='filter' id='blue' value='blue'/>
  <label for='blue'>
    Blue marker checkbox
  </label>
</div>

<div id='map'></div>

基本上，如果

返回（feature.properties[“marker color”]=“3b5998”）

的计算结果为

true

，则将显示具有所示特征集的标记。否则，标记将不会显示

是Mapbox提供的一些javascript示例（不使用jQuery）

但是我对如何使用

.change（）

或

.click（）

感到困惑，因为我希望根据是否选中相应的复选框来显示标记

我尝试使用。单击（）

---

。。。但它不起作用！我想我不能在此函数中使用

。单击（）

？

对于事件处理程序，请尝试以下操作

function (feature){
    $('.filter').on('change', function(){
        alert($(this).val() + " has changed"); //You can remove this line after testing
        //do stuff to map
    })
}

假设所有复选框都有

class=“filter”

---

好的，现在回顾一下时间维度：

• 调用

  setFilter（）

  将立即设置标记过滤器
• 当有人单击时，jQuery的

  .click（）

  将触发

因此，在setFilter内部使用

click（）

的想法是倒退的。做相反的事：

var featureLayer = L.mapbox.featureLayer()
  .loadURL('/map/getjson/')
  .addTo(map)
  // initially set the filter
  .setFilter(showBlueIfChecked);

$("input[type='checkbox']").click(function() {
  // refilter items when people click the checkbox
  featureLayer.setFilter(showBlueIfChecked);
});

function showBlueIfChecked(feature) {
  if ($("#blue").prop("checked")) {
    return (feature.properties["marker-color"] === "#3b5998");
  } else {
    return false;
  }
}

function (feature) {
  //$("input[type='checkbox']").click(function() {
    if ($("#blue").prop("checked")) {
      return (feature.properties["marker-color"] === "#3b5998");
    } else {
      return false;
    }
  //});
}

function (feature){
    $('.filter').on('change', function(){
        alert($(this).val() + " has changed"); //You can remove this line after testing
        //do stuff to map
    })
}

var featureLayer = L.mapbox.featureLayer()
  .loadURL('/map/getjson/')
  .addTo(map)
  // initially set the filter
  .setFilter(showBlueIfChecked);

$("input[type='checkbox']").click(function() {
  // refilter items when people click the checkbox
  featureLayer.setFilter(showBlueIfChecked);
});

function showBlueIfChecked(feature) {
  if ($("#blue").prop("checked")) {
    return (feature.properties["marker-color"] === "#3b5998");
  } else {
    return false;
  }
}