Javascript 如何在Fusion表中切换不同的层
我尝试在Fusion Tables贴图中切换两个图层。为了做到这一点,我创建了两个函数——我从英国《金融时报》团队的Kathrin那里得到的一个例子: 但不知怎么的,这是行不通的。请看一看:Javascript 如何在Fusion表中切换不同的层,javascript,google-fusion-tables,Javascript,Google Fusion Tables,我尝试在Fusion Tables贴图中切换两个图层。为了做到这一点,我创建了两个函数——我从英国《金融时报》团队的Kathrin那里得到的一个例子: 但不知怎么的,这是行不通的。请看一看: <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="UTF-8"&
<!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>
这里有几个问题,都在这个函数中
function changeMap(layerNum) {
if (layerNum == 1) {
updateMap(layer1);
}
if (layerNum == 2) {
updateMap(layer2);
}
}
第一个问题是,您使用的===声明了参数的类型以及值,但是由于您传递了复选框的值,所以传递了字符串1,这意味着不会调用update。。。另外,您调用的是update而不是updateMap
这是一个包含此更改的工作小提琴:非常感谢!!只有一个问题。这一行:console.logup 1真的很有必要吗?console.log只是为了登录调试控制台。您可以删除该行,但它不会更改代码的行为。@Tim JSiffle示例不再可用。。你能再寄一次吗?非常感谢。