1

我有一个与 Fusion Tables 中不同列的过滤有关的问题。

目标：我想创建一张地图，显示美式足球队的位置和美式足球球迷俱乐部在比利时的位置。

到目前为止，我在您的帮助下所做的事情：

我已经开始使用两个不同的叠加层创建地图（来自两个不同的 Fusion Tables：一个包含美式足球队的“俱乐部”表和一个包含美式足球球迷俱乐部的“球迷”表）。

我还实现了两个复选框，可以打开和关闭每一层。

我终于还设法创建了一个过滤搜索框，可以帮助我从“粉丝”表中过滤“数字”列。所以我可以刷新该层，只显示粉丝数超过 x 的粉丝俱乐部（“俱乐部”层保持不变）。

我被困在哪里：

实际上，我希望能够使用搜索框过滤三列：

  • 'Number'（粉丝总数）
  • 'Number Male'（男粉丝总数）
  • “女数”（女粉丝总数）

有什么方法可以创建两个下拉菜单：一个选择我要过滤的列，一个选择过滤选项（“大于”、“等于”或“小于”）？

我已经在附件中添加了到目前为止的代码。如果有人能帮助我解决这个问题，我将不胜感激：

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<h3>American Football in Belgium</h3>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
  src="http://maps.google.com/maps/api/js?key=AIzaSyDjB2uAt9B6cFcUiJAgANg63qNQtiF6v24&sensor=false"></script>
<script type="text/javascript">
function toggleLayer(this_layer){
  if(this_layer.getMap()) {
    this_layer.setMap(null)
  } else {
    this_layer.setMap(map);
  }
}
var layer1=null;
var layer2=null;
var map=null;

function initialize() {
  map = new google.maps.Map(document.getElementById("map_canvas"), {
    center: new google.maps.LatLng(50.809406, 4.498901),
    zoom: 9,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  layer1 = new google.maps.FusionTablesLayer({
    query: {
      select: 'Fans Location',
      from:'1_n9DXwEAdVtmHhvypRxpjgk7DMJVbmBbYgsUfdQ'
    },
    map: map
  });
  layer2 = new google.maps.FusionTablesLayer({
    query: {
      select: 'Club Location',
      from:'1waRLQMKE1bJKNT4qBesLQUNcjbezPeln6z1XQKA'
    },
    map: map
  });
}
function refreshLayer() {
  var numFans = parseInt(document.getElementById('numberFans').value);
  if (!isNaN(numFans)) {
    layer1.setOptions({
      query: {
        select: 'Fans Location',
        from:'1_n9DXwEAdVtmHhvypRxpjgk7DMJVbmBbYgsUfdQ',
        where: "'Number' > "+numFans
      }
    });
  } else {
    layer1.setOptions({
      query: {
        select: 'Fans Location',
        from:'1_n9DXwEAdVtmHhvypRxpjgk7DMJVbmBbYgsUfdQ'
      }
    });
  }
}
</script></head>
<body onload="initialize();">
<div>
  <input type="checkbox" id="show_hide_layer1" checked onchange="toggleLayer(layer1)"/>
  <label> Fans </label>
  <input type="checkbox" id="show_hide_layer2" checked onchange="toggleLayer(layer2)"/>
  <label> Clubs </label>
<div>
  <label> Number Fans greater than:</label><input type="text" id="numberFans" ></input>
  <input type="button" id="query" value="Refresh Layer" onclick="refreshLayer();">
</input>
</div>
<div id="map_canvas" style="width:80%; height:80%"></div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> 
</script> 
</body>
4

0 回答 0