Question

我正在寻找为我的网站添加过滤器（不是复选框）的解决方案。我有这个代码从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>

你能否帮我添加过滤按钮（如下所示：https://www.mapbox.com/mapbox.js/example/v1.0.0/filtering-markers） PS：我想我尝试了Mapbox网站上的所有示例，但似乎我的技能在这里非常有限。

谢谢

Answer 1

我试图添加setFilter函数，但可能我错了。我想从我的JSON文件中按类属性过滤项目。

此代码示例使用L.geoJson将标记加载到地图中。与Mapbox示例一样，您需要使用L.mapbox.featureLayer，因为它包含setFilter函数而L.geoJson没有。

Answer 2

tmcw的回答是正确的，L.mapbox.featureLayer令人困惑

本教程帮助了我！

https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-marker-tooltip/

通过json加载的Mapbox过滤器标记

2 个答案: