Как переключать разные слои в Fusion Tables

Я пытаюсь переключить два слоя на карте Fusion Tables. Для этого я создал две функции, взятые из примера Кэтрин из FT Team:

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
person Daniel Montenegro    schedule 04.08.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

У вас есть пара проблем, которые были в этой функции.

function changeMap(layerNum) {

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

Первая проблема заключается в том, что вы использовали ===, который утверждает тип ваших параметров, а также значение, но, поскольку вы передавали value флажка, вы передавали строку «1», что означало, что обновление будет нельзя вызывать... Кроме того, вы звонили update, а не updateMap.

Вот рабочая скрипка с включенным этим изменением: http://jsfiddle.net/tholman/Xg8sr/

person Tim    schedule 04.08.2012
comment
Большое спасибо!! Всего один вопрос. Эта строка: console.log(up 1) Действительно нужна? - person Daniel Montenegro; 04.08.2012
comment
console.log() предназначен только для входа в консоль отладки. Вы можете удалить строку, это не изменит поведение кода. - person Odi; 05.08.2012
comment
@Tim Пример jsfiffle больше недоступен .. не могли бы вы опубликовать его еще раз? Спасибо. - person Pavel Binar; 30.09.2013