Question

我一直试图将一张可以通过复选框过滤的融合地图放在一起。

我使用过谷歌的示例代码，但在某处显然出了问题。我是新手，所以我知道这可能是一个简单的错误，但我找不到它。

该复选框仅适用于1个过滤器。其他的不起作用，也没有链接到它们的数据。

我很感激帮助找出我出错的地方。

我的数据表位于https://www.google.com/fusiontables/DataSource?docid=1VnR1phtvbSUZXPiiVbxiwzOF06sdW_GiZoqd8Ks

我的代码在

之下

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">

    <title>Fusion Tables Layer Example: IN query</title>

<link href="https://developers.google.com/fusiontables/docs/samples/style/default.css"
        rel="stylesheet" type="text/css">
    <script type="text/javascript"
        src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
      function initialize() {
        var tableId = '1VnR1phtvbSUZXPiiVbxiwzOF06sdW_GiZoqd8Ks';

        var map = new google.maps.Map(document.getElementById('map-canvas'), {
          center: new google.maps.LatLng(53.30647442766776, -2.0839745570312917),
          zoom: 6,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var layer = new google.maps.FusionTablesLayer();
        filterMap(layer, tableId, map);

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

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

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

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

      // Filter the map based on checkbox selection.
      function filterMap(layer, tableId, map) {
        var where = generateWhere();

        if (where) {
          if (!layer.getMap()) {
            layer.setMap(map);
          }
          layer.setOptions({
            query: {
              select: 'Location',
              from: tableId,
              where: where
            }
          });
        } else {
          layer.setMap(null);
        }
      }

      // Generate a where clause from the checkboxes. If no boxes
      // are checked, return an empty string.
      function generateWhere() {
        var filter = [];
        var ops = document.getElementsByName('ops');
        for (var i = 0, ops; ops = ops[i]; i++) {
          if (ops.checked) {
            var opsName = ops.value.replace(/'/g, '\\\'');
            filter.push("'" + opsName + "'");
          }
        }
        var where = '';
        if (filter.length) {
          where = "'Ops' IN (" + filter.join(',') + ')';
        }
        return where;
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>

    <div>
      <input type="checkbox" checked="checked" name="ops"
          id="sonia-osborne" value="Sonia Osborne">
      <label>Sonia Osborne</label>
      <input type="checkbox" checked="checked" name="ops"
          id="anna-mathers" value="Anna Mathers">
      <label>Anna Mathers</label>
      <input type="checkbox" checked="checked" name="ops"
          id="neil-larner" value="Neil Larner">
      <label>Neil Larner</label>
      <input type="checkbox" checked="checked" name="ops"
          id="bridget-tully" value="Bridget Tully">
      <label>Bridget Tully</label>
    </div>
  </body>
</html>

Answer 1

您正在覆盖ops - 条件中的for：

ops = ops[i]

在第一次循环后，条件将失败，因为ops[i]为undefined

修正版：

    for (var i = 0; i<ops.length,op=ops[i]; ++i) {         
      if (op.checked) {
        var opName = op.value.replace(/'/g, '\\\'');
        filter.push("'" + opName + "'");
      }
    }

带有复选框过滤器的Google Fusion Table无法正常运行

1 个答案: