Google Fusion Tables查询:全选选项

时间:2012-04-17 10:02:56

标签: google-maps google-fusion-tables

我在Fusion Tables地图上遇到了最后一击。如何更改我的代码,以便在查询中获得“全选”选项?

我找到了这段代码......

https://developers.google.com/fusiontables/docs/samples/change_query

并将其放入我自己的代码中。但是我做错了什么?

<!DOCTYPE html>
<html>
  <head>
 <title>Aarbevingen 1900-2012 (+1000 dodelijke slachtoffers)</title>
  <style>
    #map-canvas { width:1000px; height:600px; }
  </style>
  <script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
  </script>
  <script type="text/javascript">
    var map;
    var layer;
    var layerl1;
    var layerl2;
    var layerl3;  

    function initialize() {
      map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(0, 20),
        zoom: 2
      });
      var style = [
        {
          featureType: 'all',
          elementType: 'all',
          stylers: [
            { saturation: -99 }
          ]
        }
      ];
      var styledMapType = new google.maps.StyledMapType(style, {
        map: map,
        name: 'Styled Map'
      });
      map.mapTypes.set('map-style', styledMapType);
      map.setMapTypeId('map-style');

      layer = new google.maps.FusionTablesLayer({
        query: {
          select: "'Locatie'",
          from: 3555344
        },
        map: map
        });

      layer11 = new google.maps.FusionTablesLayer({
        query: {
          select: "'geometry'",
          from: 3556478
        },
        clickable: false,
        map: map
      });

      layer12 = new google.maps.FusionTablesLayer({
        query: {
          select: "'geometry'",
          from: 3556541
        },
        clickable: false,
        map: map
      });

      layer13 = new google.maps.FusionTablesLayer({
        query: {
          select: "'geometry'",
          from: 3556712
        },
        clickable: false,
        map: map
      });

       google.maps.event.addDomListener(document.getElementById('search-string-10'),
            'change', function() {
              updateMap(layer);
        });

var legendDiv = document.createElement('DIV');
  var legend = new Legend(legendDiv, map);
  legendDiv.index = 1;
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legendDiv);      

    }

   function changeMap10(layer) {
        var searchString = document.getElementById('search-string-10').value;
        if (searchString) {
          layer.setOptions({
            query: {
              select: "'Locatie'",
              from: 3555344,
              where: "search-string-10 = '" + searchString + "'"
            }
          });
        } else {
          layer.setOptions({
            query: {
              select: "'Locatie'",
              from: 3555344
            }
          });
        }
      }   

function Legend(controlDiv, map) {
  // Set CSS styles for the DIV containing the control
  // Setting padding to 5 px will offset the control
  // from the edge of the map
  controlDiv.style.padding = '5px';

  // Set CSS for the control border
  var controlUI = document.createElement('DIV');
  controlUI.style.backgroundColor = 'white';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '1px';
  controlUI.title = 'Legend';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control text
  var controlText = document.createElement('DIV');
  controlText.style.fontFamily = 'Arial,sans-serif';
  controlText.style.fontSize = '11px';
  controlText.style.paddingLeft = '4px';
  controlText.style.paddingRight = '4px';

  // Add the text
  controlText.innerHTML = '<b>Legenda</b><br />' +
    '<div style="background-color: #ff0000; height: 10px; width: 10px; margin: 2px; float: left;"></div>> 100.000 doden<br />' +
    '<div style="background-color: #ffff00; height: 10px; width: 10px; margin: 2px; float: left;"></div>10.000-100.000 doden<br />'+
    '<div style="background-color: #00ff00; height: 10px; width: 10px; margin: 2px; float: left;"></div>1.000-10.000 doden<br />';
  controlUI.appendChild(controlText);
}    

    google.maps.event.addDomListener(window, 'load', initialize);


  </script>
  </head>
  <body>
    <div id="map-canvas"></div>
    <div style="margin-top: 10px;">
      <label>Dodental</label>
        <select id="search-string-10">
        <option value="">--Selecteer--</option>
        <option value="1.000-10.000">1.000-10.000</option>
        <option value="10.000-100.000">10.000-100.000</option>
        <option value="> 100.000">> 100.000</option>
      </select>
    </div>
  </body>
</html>

2 个答案:

答案 0 :(得分:2)

我将您的代码放在jsFiddle中,并进行了一些小改进:http://jsfiddle.net/odi86/hqm5k/

首先:你应该从你的选择列表中返回可用的值,所以我改变了:

<select id="search-string-10">
  <option value="">All</option>
  <option value="1000">1.000-10.000</option>
  <option value="10000">10.000-100.000</option>
  <option value="100000"> 100.000</option>
</select>

为了清楚起见,我为“所有”记录添加了一个新条目,但它与第一​​个没有返回值的记录基本相同。

然后您可以在查询中使用此值:

编辑:我更改了此功能,如果未选择特定选项,则将where条件设置为空字符串

function changeMap10(layer) {
    var searchString = document.getElementById('search-string-10').value;
    var whereCondition = '';
    if (searchString) {
        whereCondition = "zoekveld = '" + searchString + "'";
    }
    layer.setOptions({
        query: {
          select: "'Locatie'",
          from: 3555344,
          where: whereCondition 
        }
    });
 } 

if / else不是必需的,您可以使用具有默认值的相同查询。

最后,我更改了事件监听器,以便从示例中调用changeMap10()函数而不是updateMap()函数:

google.maps.event.addDomListener(document.getElementById('search-string-10'),
    'change', function() {
      changeMap10(layer);
});

答案 1 :(得分:0)

Odi是对的。这个答案还有一些例子:https://stackoverflow.com/a/9401345/1211981 此外,要获取所有记录,您可以使用空的where子句:

where: ""

此外,数字不应该需要引号,因此where应该是:

where: "Dodental > " + searchString,