2014-10-26 84 views
1

我正在尋找將過濾器(而不是複選框)添加到我的網站的解決方案。我有這個代碼從Mapbox加載空白地圖,並從JSON文件中添加標記。我試圖添加setFilter函數,但可能我錯誤地使用它。我想從我的JSON文件中按類別屬性過濾項目。通過json加載的Mapbox過濾器標記

<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網站上的所有例子,但似乎我的技能是非常有限的在這裏。

謝謝

回答

1

我嘗試添加使用setfilter功能,但可能是我使用它錯了。我想從我的JSON文件中按類別屬性過濾項目。

此代碼示例使用L.geoJson將標記加載到您的地圖中。像Mapbox示例一樣,您需要使用L.mapbox.featureLayer,因爲它包含setFilter函數,而L.geoJson不包含。