Question

我有要在网页上映射的Fusion Table数据，并且用户可以使用基于列中数据的选择菜单来过滤地理输出。我可以使用Fusion Table中的一列来完成此操作，但我无法弄清楚如何使用两列或更多列来完成此操作。 i.e./e.g。他们可以选择/过滤名为“＆＃39; Program＆＃39;对于标有＆＃39; GypsyMoth＆＃39;然后进一步过滤所有这些条目的“TrapRteList”＃39;标有＆＃39; NE＆＃39;

的条目

我已经尝试了很多很多方法来实现这一点，但到目前为止还没有运气。下面是我最好的尝试，但它只会从TrapRteList中选择数据。如何获取两列选择来更新地图？我不是一个程序员（很明显）并且已经把我的头撞在墙上一段时间了。我发现的解决方案似乎都没有像我希望的那样工作。任何帮助，将不胜感激。谢谢。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">

    <title>Tree Traps Map</title>

  <style>
    #map-canvas { width:1080px; height:768px; }
    .layer-wizard-search-label { font-family: sans-serif };
  </style>          

    <script type="text/javascript"
        src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
      function initialize() {
        var pointTableID = '1EADJbmeOJj60i_jIMDPNwVt0SMYEwYsw8kuU3nwI';
        var pointColumn = 'GPSpoint';

        var map = new google.maps.Map(document.getElementById('map-canvas'), {
          center: new google.maps.LatLng(53.637692, -113.422068),
          zoom: 10,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

// Initialize the points layer
        var pointsLayer = new google.maps.FusionTablesLayer({
          query: {
            select: pointColumn,
            from: pointTableID
          },
          map: map,
        styleId: 2,
        templateId: 2
        });

// -----------------------------------          

        google.maps.event.addDomListener(document.getElementById('Program'),
            'change', function() {
              updateMap(pointsLayer, pointTableID, pointColumn);
        });

        google.maps.event.addDomListener(document.getElementById('TrapRteList'),
            'change', function() {
              updateMap(pointsLayer, pointTableID, pointColumn);
        });     

      }

      // Update the query sent to the Fusion Table Layer based on
      // the user selection in the select menu
      function updateMap(pointsLayer, pointTableID, pointColumn) {
        var Program = document.getElementById('Program').value;
        if (Program) {
          pointsLayer.setOptions({
            query: {
              select: pointColumn,
              from: pointTableID,
              where: "Program = '" + Program + "'"
            }
          });
        } else {
          pointsLayer.setOptions({
            query: {
              select: pointColumn,
              from: pointTableID
            }
          });
        }

        var TrapRteList = document.getElementById('TrapRteList').value;
        if (TrapRteList) {
          pointsLayer.setOptions({
            query: {
              select: pointColumn,
              from: pointTableID,
              where: "TrapRteList = '" + TrapRteList + "'"
            }
          });
        } else {
          pointsLayer.setOptions({
            query: {
              select: pointColumn,
              from: pointTableID
            }
          });
        }       
      }   

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

  </head>
  <body>

<p style="margin-left:auto; margin-right:auto; margin-top:0.25em; margin-bottom:0.25em; width:20%; font-size:14pt; font-weight:bold;">Trapping Program</p>

  <label style="font-size:11pt; font-weight:bold;">Select trapping program: </label>
    <select id="Program">
        <option value="--Select--">--Select--</option>
        <option value="">(no value)</option>    
        <option value="Apanteles">Apanteles</option>
        <option value="AshBorer">Ash (or Lilac) Borer</option>
        <option value="EBB-Banded">Banded Elm Bark Beetle</option>
        <option value="EBB">Elm Bark Beetle</option>
        <option value="EmeraldAshBorer">Emerald Ash Borer</option>
        <option value="GypsyMoth">Gypsy Moth</option>
        <option value="InvasiveAliens">Invasive Alien Species</option>
        <option value="MountainPineBeetle">Mountain Pine Beetle</option>
        <option value="Sirix">Sirix</option>
        <option value="UglynestCaterpillar">Uglynest Caterpillar</option>
        <option value="Other:">Other Program</option>
    </select>

  <label style="font-size:11pt; font-weight:bold;">Select trap route: </label>
    <select id="TrapRteList">
        <option value="--Select--">--Select--</option>
        <option value="">(no value)</option>        
            <option value="NE">Northeast</option>
            <option value="NW">Northwest</option>
            <option value="SE">Southeast</option>
            <option value="SW">Southwest</option>
            <option value="OuterCommunity">Outer Community</option>
            <option value="Other:">Other</option>   
    </select>


    <div id="map-canvas"></div> 
  </body>
</html>

Answer 1

这应该足够了：

  function updateMap(pointsLayer, pointTableID, pointColumn) {
    var o={
            Program     : document.getElementById('Program').value,
            TrapRteList : document.getElementById('TrapRteList').value
          },where=[];

         for(var k in o){
           if(o[k]){
             where.push(k+"='"+o[k]+"'");
           }
         }

      pointsLayer.setOptions({
        query: {
          select: pointColumn,
          from: pointTableID,
          where: where.join(' and ')
        }
      });      
  }

注意：不应该用于过滤的所有选项必须具有一个评估为false的值，例如：一个空字符串。

使用多个选项在地图上过滤Fusion表中的数据

1 个答案: