Раскрывающееся меню Fusion Table Filtering

У меня есть вопрос, связанный с фильтрацией различных столбцов в таблицах Fusion.

Цель: Я хотел бы создать карту, которая показывает расположение американских футбольных команд и расположение фан-клубов американского футбола в Бельгии.

Что я сделал до сих пор с вашей помощью:

Я начал создавать карту с использованием двух разных оверлеев (из двух разных таблиц Fusion: одной таблицы 'Clubs' с командами американского футбола и одной таблицы 'Fans' с фан-клубами американского футбола).

Я также установил два флажка, которые могут включать и выключать каждый слой.

Наконец-то мне также удалось создать поле поиска для фильтрации, которое поможет мне отфильтровать столбец "Число" из таблицы "Поклонники". Таким образом, я могу обновить этот слой и показывать только фан-клубы с более чем x фанатами (слой "Клубы" остается неизменным).

Где я застрял

У меня есть три столбца, которые я бы хотел отфильтровать с помощью окна поиска:

  • "Количество" (общее количество поклонников)
  • '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>
Источник

0 ответов

Другие вопросы по тегам