在Google Fusion中合併2個查詢

Question

我是查詢的新手，我想更改下面的代碼來查詢「日期」列，「人口」和「教育」的數據。在我的代碼的延續中，我有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> 

Answer 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()添加這些功能。