使用複選框在Google Fusion Tables中進行篩選

我試圖將一組簡單的複選框添加到我的Google fusion表格地圖中，以便像打開和關閉圖層一樣使用，非常像此示例：http://jsfiddle.net/pwhqq/1/（但沒有展開的側邊欄）。這個項目完全符合我的要求，但是讓我的代碼非常類似於他的代碼仍然不起作用。使用複選框在Google Fusion Tables中進行篩選

基本上，我的複選框沒有做任何事情。這裏有一個鏈接到我的項目：http://jsfiddle.net/65uw142e/

有沒有我不正確使用我的JavaScript？我很新。謝謝！

這裏是我的代碼：

var map; 
var layer_0; 
var tableId; 
var layer; 
function initialize() { 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
    center: new google.maps.LatLng(30.27439220767769, -97.71868322157854), 
    zoom: 12, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    layer_0 = new google.maps.FusionTablesLayer({ 
    query: { 
     select: "col11", 
     from: "19xTr3sBmz3hB9n-L14no0BWZgbFJcAGdJNoOoTit" 
    }, 
    map: map, 
    styleId: 2, 
    templateId: 3 
    }); 
    tableId = "19xTr3sBmz3hB9n-L14no0BWZgbFJcAGdJNoOoTit" 
    ; 
    layer = new google.maps.FusionTablesLayer(); 
    filterMap(layer, tableId, map); 

    google.maps.event.addDomListener(document.getElementById('signals'), 
     'click', function() { 
      filterMap(layer, tableId, map); 
    }); 

    google.maps.event.addDomListener(document.getElementById('wavetronix'), 
     'click', function() { 
      filterMap(layer, tableId, map); 
    }); 

    google.maps.event.addDomListener(document.getElementById('bluetooth'), 
     'click', function() { 
      filterMap(layer, tableId, map); 
    }); 
} 

function filterMap(layer, tableId, map) { 
    var where = generateWhere(); 

    if (where) { 
     if (!layer.getMap()) { 
     layer.setMap(map); 
     } 
     layer.setOptions({ 
     query: { 
      select: 'col14', 
      from: tableId, 
      where: where 
     } 
     }); 
    } else { 
     layer.setMap(null); 
    } 
} 
function generateWhere() { 
    var filter = []; 
    var stores = document.getElementsByName('store'); 
    for (var i = 0, store; store = stores[i]; i++) { 
    if (store.checked) { 
     var storeName = store.value.replace(/'/g, '\\\''); 
     filter.push("'" + storeName + "'"); 
    } 
    } 
    var where = ''; 
    if (filter.length) { 
    where = "'col14' IN (" + filter.join(',') + ')'; 
    } 
return where; 
} 
//end new stuff 
function changeMap_0() { 
    var whereClause; 
    var searchString = document.getElementById('search-string_0').value.replace(/'/g, "\\'"); 
    if (searchString != '--Select--') { 
    whereClause = "'Location' = '" + searchString + "'"; 
    } 
    layer_0.setOptions({ 
    query: { 
     select: "col11", 
     from: "19xTr3sBmz3hB9n-L14no0BWZgbFJcAGdJNoOoTit", 
     where: whereClause 
    } 
    }); 
} 
function changeMap_1() { 
    var whereClause2; 
    var searchString = document.getElementById('search-string_1').value.replace(/'/g, "\\'"); 
    if (searchString != '--Select--') { 
    whereClause2 = "'Street_1 Street_2' CONTAINS IGNORING CASE '" + searchString + "'"; 
    } 
    layer_0.setOptions({ 
    query: { 
     select: "col11", 
     from: "19xTr3sBmz3hB9n-L14no0BWZgbFJcAGdJNoOoTit", 
     where: whereClause2 
    } 
    }); 
} 
function changeMap_2() { 
    var whereClause2; 
    var searchString = document.getElementById('search-string_2').value.replace(/'/g, "\\'"); 
    if (searchString != '--Select--') { 
    whereClause2 = "'Jurisdictn' CONTAINS IGNORING CASE '" + searchString + "'"; 
    } 
    layer_0.setOptions({ 
    query: { 
     select: "col11", 
     from: "19xTr3sBmz3hB9n-L14no0BWZgbFJcAGdJNoOoTit", 
     where: whereClause2 
    } 
    }); 
} 
function changeMap_3() { 
    var whereClause3; 
    var searchString = document.getElementById('search-string_3').value.replace(/'/g, "\\'"); 
    if (searchString != '--Select--') { 
    whereClause2 = "'County' = '" + searchString + "'"; 
    } 
    layer_0.setOptions({ 
    query: { 
     select: "col11", 
     from: "19xTr3sBmz3hB9n-L14no0BWZgbFJcAGdJNoOoTit", 
     where: whereClause2 
    } 
    }); 
} 
function Reset() { 
    var whereClause3; 
    var searchString = document.getElementById('search-string_1').value.replace(/'/g, "\\'"); 
    if (searchString != '--Select--') { 
    whereClause2 = "'Street_1' CONTAINS IGNORING CASE '" + searchString + "'"; 
    } 
    layer_0.setOptions({ 
    query: { 
     select: "col11", 
     from: "19xTr3sBmz3hB9n-L14no0BWZgbFJcAGdJNoOoTit", 
     where: whereClause3 
    } 
    }); 
} 
function Clear() { 
document.getElementById("search-string_1").value= ""; 
} 
google.maps.event.addDomListener(window, 'load', initialize); 


    <center><label class="layer-wizard-search-label"> 
    County</label> 
    <select id="search-string_3" onchange="changeMap_3(this.value);"> 
     <option value="--Select--">--Select--</option> 
     <option value="Bastrop">Bastrop</option> 
     <option value="Burnet">Burnet</option> 
     <option value="Caldwell">Caldwell</option> 
     <option value="Hays">Hays</option> 
     <option value="Travis">Travis</option> 
     <option value="Williamson">Williamson</option> 
    </select><label class="layer-wizard-search-label"> 
    City</label> 
    <select id="search-string_0" onchange="changeMap_0(this.value);"> 
     <option value="--Select--">--Select--</option> 
     <option value="Austin">Austin</option> 
     <option value="Bastrop">Bastrop</option> 
     <option value="Bee Cave">Bee Cave</option> 
     <option value="Bertram">Bertram</option> 
     <option value="Buda">Buda</option> 
     <option value="Burnet">Burnet</option> 
     <option value="Caldwell CO">Caldwell CO</option> 
     <option value="Cedar Creek">Cedar Creek</option> 
     <option value="Cedar Park">Cedar Park</option> 
     <option value="Creedmoor">Creedmoor</option> 
     <option value="Dripping Springs">Dripping Springs</option> 
     <option value="Elgin">Elgin</option> 
     <option value="Florence">Florence</option> 
     <option value="Georgetown">Georgetown</option> 
     <option value="Granite Shoals">Granite Shoals</option> 
     <option value="Hutto">Hutto</option> 
     <option value="Kingsland">Kingsland</option> 
     <option value="Kyle">Kyle</option> 
     <option value="Lago Vista">Lago Vista</option> 
     <option value="Lakeway">Lakeway</option> 
     <option value="Leander">Leander</option> 
     <option value="Liberty Hill">Liberty Hill</option> 
     <option value="Lockhart">Lockhart</option> 
     <option value="Luling">Luling</option> 
     <option value="Manor">Manor</option> 
     <option value="Marble Falls">Marble Falls</option> 
     <option value="Martindale">Martindale</option> 
     <option value="Maxwell">Maxwell</option> 
     <option value="Pflugerville">Pflugerville</option> 
     <option value="Rollingwood">Rollingwood</option> 
     <option value="Round Rock">Round Rock</option> 
     <option value="San Marcos">San Marcos</option> 
     <option value="Serene Hills">Serene Hills</option> 
     <option value="Smithville">Smithville</option> 
     <option value="Spicewood">Spicewood</option> 
     <option value="Sunset Valley">Sunset Valley</option> 
     <option value="Taylor">Taylor</option> 
     <option value="Travis CO">Travis CO</option> 
     <option value="Williamson CO">Williamson CO</option> 
     <option value="West Lake Hills">West Lake Hills</option> 
     <option value="Wimberley">Wimberley</option> 
     <option value="Woodcreek">Woodcreek</option> 
     <option value="Wyldwood">Wyldwood</option> 
    </select> 
    <label class="layer-wizard-search-label"> 
     Jurisdiction</label> 
    <select id="search-string_2" onchange="changeMap_2(this.value);"> 
     <option value="--Select--">--Select--</option> 
     <option value="City of Austin">Austin</option> 
     <option value="City of Cedar Park">Cedar Park</option> 
     <option value="City of Georgetown">Georgetown</option> 
     <option value="City of Leander">Leander</option> 
     <option value="City of Round Rock">Round Rock</option> 
     <option value="City of Taylor">Taylor</option> 
     <option value="TxDOT">TxDOT</option> 
     <option value="Williamson County">Williamson County</option> 
    </select> 
    <label class="layer-wizard-search-label"> 
     Street</label> 
    <input onkeydown="if (event.keyCode == 13) document.getElementById('changeMap_1').click()" type="text" id="search-string_1"> 
    <input type="button" onclick="changeMap_1()" id="changeMap_1" value="Search"> 
    <input type="button" onclick="Reset(); Clear();" value="Reset"><br> 
    <input type="checkbox" name="store" checked="checked" 
     id="signals" value="Signals"> 
     <label>Signals</label> 
    <input type="checkbox" name="store" 
     id="bluetooth" value="Wavetronix"> 
     <label>WaveTronix Readers</label> 
    <input type="checkbox" name="store" 
     id="bluetooth" value="Bluetooth"> 
     <label>Bluetooth Readers</label></center> 
</div>

來源

2015-04-30 jarch

有多種問題，

看看控制檯，有一個錯誤：
遺漏的類型錯誤：無法讀取屬性「 addEventListener'爲空
沒有元素爲ID wavetronix
您使用了錯誤的列名col14的過濾器，您存儲signal/bluetooth/wavetronix是col16列（你也可以使用filt）
還使用了錯誤的列名col14的位置列，這是col11（或Coordinates）
IN()是大小寫敏感的，所存儲的值在全部小寫，但對應的複選框的值開始大寫
（更多的是邏輯錯誤）：使用2個不同的層，什麼是沒有意義的，因爲當在1層中的所有項目都可見的其他層的過濾是無用

撥弄固定的問題（ 1） - （4）：http://jsfiddle.net/4o6mu1u8/

撥弄單層：http://jsfiddle.net/doktormolle/8nchnuud/

與單層的小提琴有一些改進。它減少了腳本，並將過濾的細節（列名，條件）存儲爲特定字段的數據屬性。幾點說明：

所有控件都包裝成一個表格（#map-filter），它會更容易訪問控制和調用過濾功能的控制
活動將通過數據 - 添加屬性，開始過濾，例如當複選框被點擊限定data-event -attribute與值click爲複選框
```
<input type="checkbox" data-event="click"/> 
```
要選擇這將是
```
<select data-event="change">....</select> 
```
控件將被使用時，它們具有data-col過濾 - 屬性（將值設置爲所需列的名稱），例如：
```
<select data-event="change" data-col="Location"> 
```
操作者將通過data-filter -attribute被設置（使用%作爲佔位符，它將與消毒值代替），例如：
```
<select data-col="Location" data-filter="CONTAINS IGNORING CASE %" data-event="change" > 
```
當沒有定義的操作者=將用於

當你想使用IN()設置data-filter -attribute到IN
默認的值將作爲字符串，當你想使用它們作爲數量進行data-type -attribute與值num

來源

2015-05-01 18:49:14

使用複選框在Google Fusion Tables中進行篩選

回答

相關問題