使用.setFilter和Mapbox API的Javascript問題

我使用Mapbox的API在地圖上加載標記，並且我想要顯示不同的標記，具體取決於是否選中與其標記顏色相對應的複選框。使用.setFilter和Mapbox API的Javascript問題

我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()這裏，因爲我想要的標記，以根據其相應的複選框是否被選中顯示。

我嘗試使用。點擊（）：

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

...但它不工作！我想我不能在這個函數裏面使用.click()？

來源

2014-06-23 LNA

好了，所以審查時間的維度：

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

來源

2014-06-23 19:33:09 tmcw

事件處理程序試試這個

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

來源

2014-06-23 03:23:14 Gabs00

使用.setFilter和Mapbox API的Javascript問題

回答

相關問題