如何切換Fusion Tables中的不同圖層

我試圖在Fusion Tables圖中切換兩個圖層。爲了使我已經創建了兩個功能 - 這是我從一個例子了從FT隊席：如何切換Fusion Tables中的不同圖層

https://fusion-tables-users-group.googlegroups.com/attach/1d0b036133024eef/toggle_layers.html?pli=1&view=1&part=4

但不知何故，這是行不通的。請看看：

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="UTF-8"> 
    <title>PDDUA Porto Alegre</title> 
<style> 
#map-canvas { width:400px; height:450px; } 
</style> 
<script type="text/javascript" 
src="http://maps.google.com/maps/api/js?sensor=false"> 
</script> 
<script type="text/javascript"> 

var map; 

var layer1; 
var layer2; 

function initialize() { 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
     center: new google.maps.LatLng(-30.07080000, -51.1900000), 
     zoom: 10, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 
layer1 = new google.maps.FusionTablesLayer({ 
    query: { 
    select: "'geometry'", 
    from: '4756019', 
    }, 
    map: map 
}); 
layer2 = new google.maps.FusionTablesLayer({ 
    query: { 
select: "'geometry'", 
from: '4755921', 
    }, 
    map: map 
    });  
} 
google.maps.event.addDomListener(window, 'load', initialize); 

//FUNCTION TO CHANGE LAYERS 
function changeMap(layerNum) { 
    if (layerNum === 1) { 
     update(layer1); 
    } 
    if (layerNum === 2) { 
     update(layer2); 
    } 
} 

//FUNCTION TO UPDATE LAYERS 
function updateMap(layer) { 
    var layerMap = layer.getMap(); 
    if (layerMap) { 
     layer.setMap(null); 
    } else { 
     layer.setMap(map); 
    } 
} 

//FUNCTION TO FILTER DATA BY COLUMNS AND ROWS 
function filterData() { 
    var searchString = document.getElementById('search-string').value.replace(/'/g, "\\'"); 
    var filter = document.getElementById('filter').value.replace(/'/g, "\\'"); 
    if (filter === "UEU") { 
    layer1.setOptions({ 
     query: { 
      select: "'geometry'", 
      from: '4756019', 
      where: "'UEU' = '" + searchString + "'" 
     } 
    }); 
} 
else if (filter === "SUBUEU") { 
    layer1.setOptions({ 
     query: { 
      select: "'geometry'", 
      from: '4756019', 
      where: "'SUBUEU' = '" + searchString + "'" 
     } 
    }); 
} 
else if (filter === "CODIGO") { 
    layer1.setOptions({ 
     query: { 
      select: "'geometry'", 
      from: '4756019', 
      where: "'CODIGO' = '" + searchString + "'" 
     } 
    }); 
} 
} 
//FUNCTION TO RESET DATA 
function resetData() { 
document.getElementById('search-string').value = ""; 
    layer1.setOptions({ 
     query: { 
     select: "'geometry'", 
     from: '4756019' 
     } 
    }); 
} 

</script> 
</head> 
<div id="map-canvas"></div><br/> 
<div style="margin-top: 10px;"> 
    <label>Tipo</label> 
    <select id="filter"> 
     <option value="">--selecionar--</option> 
    <option value="UEU">UEU</option> 
    <option value="SUBUEU">SUBUEU</option> 
    <option value="CODIGO">CODIGO</option> 
    </select><br/><br/> 
<input type="text" id="search-string" /> 
<input type="button" onclick="filterData();" value="Find!"/> 
<input type="button" onclick="resetData();" value="Reset Layer" /><br/><br/> 
<label>Layers:</label><br/> 
<label>RAREFEITA</label><input type="checkbox" value="1" onclick="changeMap(this.value);" checked="checked" /><br/> 
<label>INTENSIVA</label><input type="checkbox" value="2" onclick="changeMap(this.value);" checked="checked" /><br/> 
</div> 
</body> 
</html>

來源

2012-08-04 Daniel Montenegro

這裏有幾個問題，都是在這個函數中。

function changeMap(layerNum) { 

    if (layerNum == 1) { 
     updateMap(layer1); 
    } 
    if (layerNum == 2) { 
     updateMap(layer2); 
    } 
}

的第一個問題是，你使用===它斷言你PARAMATERS的類型，以及價值，但因爲你是路過的複選框的value，你傳遞字符串「1 「，這意味着更新不會被稱爲...此外，你打電話update而不是updateMap。

這是一個工作小提琴與此變化包括：http://jsfiddle.net/tholman/Xg8sr/

來源

2012-08-04 02:49:02 Tim

非常感謝！只是一個問題。這行：console.log（「up 1」）真的有必要嗎？ – 2012-08-04 15:07:09

'console.log（）'僅用於登錄調試控制檯。您可以刪除該行，但不會更改代碼的行爲。 – Odi 2012-08-04 21:38:41

@Tim jsfiffle的例子不再可用..你可以請再次發佈它？謝謝。 – 2013-09-30 18:47:11

如何切換Fusion Tables中的不同圖層

回答

相關問題