1

Fusion Tables でのさまざまな列のフィルタリングに関連する質問があります。

目標:ベルギーのアメリカン フットボール チームの場所とアメリカン フットボール ファン クラブの場所を示すマップを作成したいと思います。

あなたの助けを借りて私がこれまでに行ったこと：

2 つの異なるオーバーレイを使用してマップの作成を開始しました (2 つの異なる Fusion テーブルから作成されます。1 つはアメリカン フットボール チームの「Clubs」テーブル、もう 1 つはアメリカン フットボール ファン クラブの「Fans」テーブルです)。

また、各レイヤーのオンとオフを切り替えることができる 2 つのチェックボックスも実装しました。

最後に、「ファン」テーブルから「番号」列をフィルタリングするのに役立つフィルタリング検索ボックスを作成することもできました。そのため、そのレイヤーを更新して、x 人以上のファンがいるファン クラブのみを表示できます (「クラブ」レイヤーは変更されません)。

私が立ち往生している場所：

実際には、検索ボックスでフィルタリングできるようにしたい 3 つの列があります。

  • 'Number' (ファンの総数)
  • 「男性数」（男性ファンの総数）
  • 「Number Female」（女性ファンの総数）

2 つのドロップダウン メニューを作成する方法はありますか?

これまでに添付したコードを追加しました。誰かがこれで私を助けることができれば、私はとても感謝しています:

<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