0

我正在尝试在 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>
4

1 回答 1

2

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

function changeMap(layerNum) {

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

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

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

于 2012-08-04T02:49:02.967 回答