1

我是查询新手，我想更改下面的代码以查询“日期”列、“人口”和“教育”的数据。在我的代码的延续中，我有 3 个复选框来过滤掉与日期有关的数据，以及选择器来选择我想要表示的颜色编码和数据。当前代码的实时示例：http: //4vec.com/test/2.html

所以在一个完美的场景中，当我取消选择所有复选框时，什么都不会出现，而当我选择 2006 时，只会出现具有 2006 的多边形。

     function initialize() {
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      center: new google.maps.LatLng(30.64804,31.5023868333333),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var layer = new google.maps.FusionTablesLayer({
      query: {
        select: 'geo',
        from: '1c-imTqDv8SfoEG_dkw41TjpquihqELzTIrs9F88'
            }
    });
    layer.setMap(map);

    initSelectmenu();
    for (column in COLUMN_STYLES) {
      break;
    }
    applyStyle(map, layer, column);
    addLegend(map);

    google.maps.event.addDomListener(document.getElementById('selector'),
        'change', function() {
          var selectedColumn = this.value;
          applyStyle(map, layer, selectedColumn);
          updateLegend(selectedColumn);
    });
    google.maps.event.addDomListener(document.getElementById('2006'),
        'click', function() {
          filterMap(layer, tableId, map);
    });

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

    google.maps.event.addDomListener(document.getElementById('2008'),
        '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: 'geo',
          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 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 = "'Date' IN (" + filter.join(',') + ')';
    }
    return where;
  }

  google.maps.event.addDomListener(window, 'load', initialize);

  // Initialize the drop-down menu
  function initSelectmenu() {
    var selectMenu = document.getElementById('selector');
    for (column in COLUMN_STYLES) {
      var option = document.createElement('option');
      option.setAttribute('value', column);
      option.innerHTML = column;
      selectMenu.appendChild(option);
    }
  }

  // Apply the style to the layer & generate corresponding legend
  function applyStyle(map, layer, column) {
    var columnStyle = COLUMN_STYLES[column];
    var styles = [];

    for (var i in columnStyle) {
      var style = columnStyle[i];
      styles.push({
        where: generateWhere(column, style.min, style.max),
        polygonOptions: {
          fillColor: style.color,
          fillOpacity: style.opacity ? style.opacity : 0.8
        }
      });
    }

    layer.set('styles', styles);
  }

  // Create the where clause
  function generateWhere(columnName, low, high) {
    var whereClause = [];
    whereClause.push("'");
    whereClause.push(columnName);
    whereClause.push("' >= ");
    whereClause.push(low);
    whereClause.push(" AND '");
    whereClause.push(columnName);
    whereClause.push("' < ");
    whereClause.push(high);
    return whereClause.join('');
  }

  // Initialize the legend
  function addLegend(map) {
    var legendWrapper = document.createElement('div');
    legendWrapper.id = 'legendWrapper';
    legendWrapper.index = 1;
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(
        legendWrapper);
    legendContent(legendWrapper, column);
  }

  // Update the legend content
  function updateLegend(column) {
    var legendWrapper = document.getElementById('legendWrapper');
    var legend = document.getElementById('legend');
    legendWrapper.removeChild(legend);
    legendContent(legendWrapper, column);
  }

  // Generate the content for the legend
  function legendContent(legendWrapper, column) {
    var legend = document.createElement('div');
    legend.id = 'legend';

    var title = document.createElement('p');
    title.innerHTML = column;
    legend.appendChild(title);

    var columnStyle = COLUMN_STYLES[column];
    for (var i in columnStyle) {
      var style = columnStyle[i];

      var legendItem = document.createElement('div');

      var color = document.createElement('span');
      color.setAttribute('class', 'color');
      color.style.backgroundColor = style.color;
      legendItem.appendChild(color);

      var minMax = document.createElement('span');
      minMax.innerHTML = style.min + ' - ' + style.max;
      legendItem.appendChild(minMax);

      legend.appendChild(legendItem);
    }

    legendWrapper.appendChild(legend);
  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>

4

1 回答 1

1

您的代码中有几个小问题：

  • 您将变量tableId用于点击事件，但从未设置它
  • 有两个函数调用generateWhere()，我将第二个更改为generateStyleConditon()
  • 最后我建议让图层一直在地图上，只要确保未选中复选框时不会检索到任何记录。

更新后的filterMap()函数generateWhere()如下所示：

// Filter the map based on checkbox selection.
function filterMap(layer, tableId, map) {
    var where = generateWhere();
    layer.setOptions({
        query: {
            select: 'geo',
            from: tableId,
            where: where
        },
        map: map
    });
}

// Generate a where clause from the checkboxes. If no boxes
// are checked, return an empty string.
function generateWhere() {
    var yearFilter = [];
    var years = document.getElementsByName('years');
    for (var i = 0, year; year = years[i]; i++) {
        if (year.checked) {
            yearFilter.push("'" + year.value + "'");
        }
    }
    //if where clause is not set, make sure no value is selected
    var where = '';
    var yearStr = yearFilter.join(',');
    if (!yearStr) {
        yearStr = "''";
    }
    where = "'Date' IN (" + yearStr + ")";
    return where;
}

我将更新的代码放在 jsFiddle 上：http: //jsfiddle.net/odi86/sGMSq/

如果您想使用更多列进行过滤，只需在generateWhere()函数中添加这些列。

于 2012-05-21T08:21:18.380 回答