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クリックイベントに変数を使用しましたが、設定しませんでした
  • と呼ばれる2つの関数がありますgenerateWhere()、私は2番目のものをに変更しました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 に答える