Question

我正在尝试使用Fusion Table开发谷歌地图。我想通过复选框过滤地图。但它不能正常工作。这是我的代码

<form>
<input type="checkbox" checked="checked" name="store" value="male" onclick="filterData()">Male
<input type="checkbox" checked="checked" name="store" value="female" onclick="filterData()">Female

</form>

<div id="map_canvas"></div>

 <script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layer_0;
function initialize() {
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(9.35300524537724, -82.31857926757817),
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  layer_0 = new google.maps.FusionTablesLayer({
    query: {
      select: 'sex',
      from: "1Cr2ObveEaSINhSVx1D9rZQN06o5aRxxcf8lFE6Y"

    },
    map: map

  });
}


function filterData() {
 var filter = [];
 var stores = document.getElementsByName('store');

for (var i = 0, store; store = stores[i]; i++) {
if (store.checked) {
  filter.push('\'' + store.value + '\''); 
}
}

if (filter.length) {
if (!layer.getMap()) {
  layer.setMap(map);

}
layer.setOptions({
  query: {
    select: 'sex',
    from: "1Cr2ObveEaSINhSVx1D9rZQN06o5aRxxcf8lFE6Y",
     where: '\'sex\' IN (' + filter.join(',') + ')'
  }
});

} else { 
layer.setMap(null);
 }
}
</script>

地图正在显示，但复选框无效。问题出在哪儿？请告诉我解决方案。

Answer 1

运行代码时出现（相当明显的）javascript错误：

Uncaught ReferenceError: layer is not defined on line 46

那应该是（基于你的代码）layer_0。

更改filterData函数：

function filterData() {
  var filter = [];
  var stores = document.getElementsByName('store');

  for (var i = 0, store; store = stores[i]; i++) {
    if (store.checked) {
      filter.push('\'' + store.value + '\''); 
    }
  }

  if (filter.length) {
    if (!layer_0.getMap()) {
      layer_0.setMap(map);
    }
    layer_0.setOptions({
      query: {
        select: 'sex',
        from: "1Cr2ObveEaSINhSVx1D9rZQN06o5aRxxcf8lFE6Y",
        where: '\'sex\' IN (' + filter.join(',') + ')'
      }
    });

  } else { 
    layer_0.setMap(null);
  }
}

working example

通过复选框过滤谷歌地图不能正常工作

1 个答案: