Question

我正在使用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>

但是，我无法弄清楚如何让.change()函数在 .setFilter( function(feature) {} )内工作。

var featureLayer = L.mapbox.featureLayer() .loadURL('/map/getjson/') .addTo(map) .setFilter( function (feature) { //$("input[type='checkbox']").click(function() { if ($("#blue").prop("checked")) { return (feature.properties["marker-color"] === "#3b5998"); } else { return false; } //}); } );

基本上，如果return(feature.properties["marker-color"] === "#3b5998")评估为true，则会显示具有指定功能集的标记。否则，标记将不会显示。

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

map.featureLayer.setFilter(function(feature) { return (feature.properties['marker-symbol'] in enabled); }

但我对此处如何使用.change()或.click()感到困惑，因为我希望根据是否选中相应的复选框来显示标记。

我尝试使用.click（）：

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

......但它不起作用！我想我不能在这个函数中使用.click()？

Answer 1

好的，所以要查看时间维度：

调用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;
  }
}

Answer 2

对于事件处理程序，请尝试此

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

假设所有复选框都有class="filter"

fiddle

使用.setFilter和Mapbox API的Javascript问题

2 个答案: