使用复选框

时间：2015-04-30 19:27:50

标签： javascript html checkbox google-fusion-tables

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

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

1 个答案:

答案 0 :(得分：1)

有多个问题，

  1. 看一下控制台，有一个错误：
    未捕获的TypeError：无法读取null的“addEventListener”属性
    没有标识为wavetronix

    2. 的元素

  2. 您对过滤器使用了错误的列名col14，您存储signal/bluetooth/wavetronix的列为col16（您也可以使用filt）< / p>

  3. 您还使用错误的列名col14作为位置列，它是col11（或Coordinates）

  4. IN()区分大小写，存储的值全部为小写，但复选框的值从大写开始

  5. （更多是逻辑错误）：你使用2个不同的层，没有意义，因为当在1层中所有项都可见时，对另一层的过滤是无用的

    6. 解决固定问题（1。） - （4。）：http://jsfiddle.net/4o6mu1u8/

    使用单个图层：http://jsfiddle.net/doktormolle/8nchnuud/

    单层小提琴有一些改进。它减少了脚本并将过滤的细节（列名称，条件）存储为特定字段的数据属性。一些解释：

    • 所有控件都包装在一个表单（#map-filter）中，这样可以更轻松地访问控件并调用过滤器函数

    • 控件的事件将通过数据属性添加，以开始过滤，例如单击复选框时，为复选框定义data-event - 值为click的属性

      <input type="checkbox" data-event="click"/>

      对于选择它将是

      <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

相关问题
最新问题