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

时间:2012-08-04 02:21:55

标签: javascript google-fusion-tables

我正在尝试在Fusion Tables Map中切换两个图层。为了使我创造了两个功能 - 我从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>

1 个答案:

答案 0 :(得分:2)

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

function changeMap(layerNum) {

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

第一个问题是你使用的===断言了参数的类型以及值,但是因为你传递了复选框的value,所以你通过了字符串“1”,这意味着不会调用更新...此外,您正在调用update而不是updateMap

以下是此更改的工作小提琴:http://jsfiddle.net/tholman/Xg8sr/