如何在 Fusion Tables 中切换不同的图层答案

【问题标题】：How to toggle different layers in Fusion Tables如何在 Fusion Tables 中切换不同的图层
【发布时间】：2012-08-04 02:21:55
【问题描述】：

我正在尝试在 Fusion Tables 地图中切换两个图层。为此，我创建了两个函数 - 我从 FT 团队的 Kathrin 那里获取了一个示例：

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>

【问题讨论】：

标签： javascript google-fusion-tables

【解决方案1】：

这里有几个问题，都在这个函数中。

function changeMap(layerNum) {

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

第一个问题是您使用=== 断言参数的类型以及值，但是由于您传递了复选框的value，因此您传递了字符串“1 "，这意味着不会调用更新...另外，您调用的是update，而不是updateMap。

这是一个包含此更改的工作小提琴：http://jsfiddle.net/tholman/Xg8sr/

【讨论】：

非常感谢！！就一个问题。这行：console.log("up 1") 真的有必要吗？
console.log() 仅用于登录调试控制台。您可以删除该行，它不会改变代码的行为。
@Tim jsfiffle 示例不再可用.. 你能再发一次吗？谢谢。