Leaflet 通过json加载的Mapbox筛选器标记

我正在寻找解决方案添加过滤器（而不是复选框）到我的网站。我让这段代码从Mapbox加载空白映射，并从JSON文件添加标记。我试图添加setFilter函数，但可能我用错了。我想从JSON文件中按类别属性筛选项目

<script>
L.mapbox.accessToken = '*************';

  var baseLayer = L.mapbox.tileLayer('test****');
  var markers = L.markerClusterGroup();

  // CALL THE GEOJSON HERE
  jQuery.getJSON("locations.geojson", function(data) {

    var geojson = L.geoJson(data, {
      onEachFeature: function (feature, layer) {
        // USE A CUSTOM MARKER
        layer.setIcon(L.mapbox.marker.icon({'marker-symbol': 'circle-stroked', 'marker-color': '004E90'}));
        // ADD A POPUP
        layer.bindPopup("<h1>" + feature.properties.title + "</h1><p>" + feature.properties.description + "</p><p><a href=' + feature.properties.website + '>" + feature.properties.website + "</a></p>");
         layer.on('mouseover', function (e) {
            this.openPopup();
        });
        layer.on('mouseout', function (e) {
            this.closePopup();
        });

      }
    });


    markers.addLayer(geojson);

    // CONSTRUCT THE MAP
    var map = L.map('map', {
        searchControl: {layer: markers},
        zoom: 6,
        center: [51.505, -0.09],
        maxZoom: 13
        })
        .setView([62.965, 19.929], 5)
        .fitBounds(markers.getBounds());

    baseLayer.addTo(map);
    markers.addTo(map);
    L.control.fullscreen().addTo(map);
  });




    </script>

L.mapbox.accessToken='**************'；
var baseLayer=L.mapbox.tillelayer（'test****'）；
var markers=L.markerClusterGroup（）；
//在这里调用GEOJSON
getJSON（“locations.geojson”，函数（数据）{
var geojson=L.geojson（数据{
onEachFeature：功能（功能，图层）{
//使用自定义标记
layer.setIcon（L.mapbox.marker.icon（{'marker-symbol'：'circle stroked'，'marker color'：'004E90'）；
//添加一个弹出窗口
layer.bindPopup（“+feature.properties.title+”“+feature.properties.description+”
”；
层上（'mouseover'，函数（e）{
这个.openPopup（）；
});
层上（'mouseout'，函数（e）{
this.closePopup（）；
});
}
});
markers.addLayer（geojson）；
//构建地图
var map=L.map（'map'{
searchControl:{layer:markers}，
缩放：6，
中间：[51.505，-0.09]，
最大缩放：13
})
.setView（[62.965,19.929]，5）
.fitBounds（markers.getBounds（））；
baseLayer.addTo（map）；
markers.addTo（map）；
L.control.fullscreen（）.addTo（映射）；
});

你能帮我添加过滤按钮吗（类似于这里：） PS：我想我尝试了Mapbox网站上的所有例子，但我的技能在这里似乎非常有限

多谢各位

我试图添加setFilter函数，但可能我用错了。我想从JSON文件中按类别属性筛选项目

<script>
L.mapbox.accessToken = '*************';

  var baseLayer = L.mapbox.tileLayer('test****');
  var markers = L.markerClusterGroup();

  // CALL THE GEOJSON HERE
  jQuery.getJSON("locations.geojson", function(data) {

    var geojson = L.geoJson(data, {
      onEachFeature: function (feature, layer) {
        // USE A CUSTOM MARKER
        layer.setIcon(L.mapbox.marker.icon({'marker-symbol': 'circle-stroked', 'marker-color': '004E90'}));
        // ADD A POPUP
        layer.bindPopup("<h1>" + feature.properties.title + "</h1><p>" + feature.properties.description + "</p><p><a href=' + feature.properties.website + '>" + feature.properties.website + "</a></p>");
         layer.on('mouseover', function (e) {
            this.openPopup();
        });
        layer.on('mouseout', function (e) {
            this.closePopup();
        });

      }
    });


    markers.addLayer(geojson);

    // CONSTRUCT THE MAP
    var map = L.map('map', {
        searchControl: {layer: markers},
        zoom: 6,
        center: [51.505, -0.09],
        maxZoom: 13
        })
        .setView([62.965, 19.929], 5)
        .fitBounds(markers.getBounds());

    baseLayer.addTo(map);
    markers.addTo(map);
    L.control.fullscreen().addTo(map);
  });




    </script>

---

此代码示例使用

L.geoJson

将标记加载到地图中。与Mapbox示例一样，您需要使用

L.Mapbox.featureLayer

，因为它包含

setFilter

函数，而

L.geoJson

没有。

tmcw的答案是正确的，L.Mapbox.featureLayer令人困惑

这个教程帮助了我