Question

我在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>

Answer 1

我将您的代码放在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);
});

Answer 2

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

where: ""

此外，数字不应该需要引号，因此where应该是：

where: "Dodental > " + searchString,

Google Fusion Tables查询：全选选项

2 个答案: