使用复选框在 Google 个 Fusion Tables 中过滤

Question

我正在尝试向我的 google 融合表地图添加一组简单的复选框，以便用作打开和关闭图层，就像这个例子：http://jsfiddle.net/pwhqq/1/（但没有扩展侧边栏）。这个项目完全符合我的要求，但是让我的代码与他的代码非常相似仍然行不通。

基本上，我的复选框没有做任何事情。这是我项目的 link：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>

Answer 1

存在多个问题，

看一下控制台，有错误：
未捕获类型错误：无法读取属性 'addEventListener' of null
没有 ID 为 wavetronix
您为过滤器使用了错误的列名 col14，您存储 signal/bluetooth/wavetronix 的列是 col16（您也可以使用 filt)
您还为位置列使用了错误的列名 col14，它是 col11（或 Coordinates）
IN()区分大小写，里面存储的值都是小写的，但是复选框的值开始大写
（更多的是逻辑错误）：你使用了 2 个不同的层，这是没有意义的，因为当在 1 层中所有项目都可见时，另一层的过滤是无用的

Fiddle 已修复问题 (1.)-(4.)：http://jsfiddle.net/4o6mu1u8/

Fiddle单层：http://jsfiddle.net/doktormolle/8nchnuud/

单层的fiddle有一些改进。它减少了脚本并将过滤（列名、条件）的详细信息存储为特定字段的数据属性。一些解释：

所有的控件都封装在一个表单中(#map-filter)，这将使访问控件和调用过滤器功能变得更加容易
控件的事件将通过数据属性添加，以开始过滤，例如当一个复选框被点击时定义一个data-event-属性，复选框
的值为click
```
<input type="checkbox" data-event="click"/>
```
对于 select 它将是
```
<select data-event="change">....</select>
```
控件在具有 data-col 属性（值设置为所需列的名称）时将用于过滤，例如：
```
 <select data-event="change" data-col="Location">
```
运算符将通过 data-filter 属性设置（使用 % 作为占位符，它将被清理后的值替换），示例：
```
 <select data-col="Location" data-filter="CONTAINS IGNORING CASE %" data-event="change" >
```
当您没有定义运算符时 = 将被使用

当您想使用 IN() 时，将 data-filter 属性设置为 IN
默认情况下，这些值将用作字符串，当您想将它们用作数字时，请设置一个 data-type-属性值为 num

使用复选框在 Google 个 Fusion Tables 中过滤

Filter in Google Fusion Tables using checkboxes

html

javascript

checkbox

google-fusion-tables