Fusion Table 过滤器无法更新地图

Question

下面附上我的代码。地图加载一次但在更新图层查询后不会加载

如果有人能尽快为我提供解决方案，请一旦还选择了该选项，就会始终加载默认地图，这是主要问题。没有根据过滤器制作地图。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport"></meta>
<title>Rise Project (Responses) - Google Fusion Tables</title>
<style type="text/css">
html, body, #googft-mapCanvas {
  height: 800px;
  margin: 0;
  padding: 0;
  width: 600px;
}
</style>

<script type="text/javascript" src="https://maps.google.com/maps/api/js?v=3"></script>

<script type="text/javascript">
//var tableId = '1hVh2fZH52W9qCM4rMnqzjG6z3lPM5B970H__hLUn';

  function initialize() {
    var tableId = '1hVh2fZH52W9qCM4rMnqzjG6z3lPM5B970H__hLUn';
    google.maps.visualRefresh = true;
    var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) ||
      (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));
    if (isMobile) {
      var viewport = document.querySelector("meta[name=viewport]");
      viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no');
    }
    var mapDiv = document.getElementById('googft-mapCanvas');
    mapDiv.style.width = isMobile ? '100%' : '600px';
    mapDiv.style.height = isMobile ? '100%' : '600px';
    var map = new google.maps.Map(mapDiv, {
      center: new google.maps.LatLng(30.3765560012846, 77.97422298410743),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open'));
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));

    layer = new google.maps.FusionTablesLayer({
      map: map,
      heatmap: { enabled: false },
       query: {
              select: "*",
              from: tableId
            },
      options: {
        styleId: 2,
        templateId: 3
      }
    });
   window.alert(layer.query.where);

    if (isMobile) {
      var legend = document.getElementById('googft-legend');
      var legendOpenButton = document.getElementById('googft-legend-open');
      var legendCloseButton = document.getElementById('googft-legend-close');
      legend.style.display = 'none';
      legendOpenButton.style.display = 'block';
      legendCloseButton.style.display = 'block';
      legendOpenButton.onclick = function() {
        legend.style.display = 'block';
        legendOpenButton.style.display = 'none';
      }
      legendCloseButton.onclick = function() {
        legend.style.display = 'none';
        legendOpenButton.style.display = 'block';
      }
    }
        window.alert("BEfore");

        google.maps.event.addDomListener(document.getElementById('delivery'),
            'change', function() {
              updateMap(layer, tableId);

        });


} 

      function updateMap(layer, tableId) {
        var delivery = document.getElementById('delivery').value;

        window.alert(delivery + "In Update Map");
        if (delivery) {

          layer.setOptions({
            query: {
              select: "*",
              from: tableId, 
              where: "Boys/Girls = '" + delivery + "'"
            }
          });
        } else {
          layer.setOptions({
            query: {
              select: "*",
              from: tableId
            }
          });
        }
      }
window.alert("Out of function");
  google.maps.event.addDomListener(window, 'load', initialize);
window.alert("End");
</script>
</head>

<body>
<br><br><br><p align="center">
  <div id="googft-mapCanvas">

  </div>
  <label>Boys/Girls?</label>
    <select id="delivery">
      <option value="">--Select--</option>
      <option value="Boys">Boys</option>
      <option value="Girls">Girls</option>
    </select></p>
</body>
</html>

Answer 1

查询无效（列名前后需要'）：

where: "Boys/Girls = '" + delivery + "'"

应该是：

where: "'Boys/Girls' = '" + delivery + "'"

proof of concept fiddle

代码片段：

function initialize() {
  var tableId = '1hVh2fZH52W9qCM4rMnqzjG6z3lPM5B970H__hLUn';
  var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) ||
    (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));
  if (isMobile) {
    var viewport = document.querySelector("meta[name=viewport]");
    viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no');
  }
  var mapDiv = document.getElementById('googft-mapCanvas');
  var map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(30.3765560012846, 77.97422298410743),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open'));
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));

  layer = new google.maps.FusionTablesLayer({
    map: map,
    heatmap: {
      enabled: false
    },
    query: {
      select: "*",
      from: tableId
    },
    options: {
      styleId: 2,
      templateId: 3
    }
  });
  console.log(JSON.stringify(layer.get("query")));

  google.maps.event.addDomListener(document.getElementById('delivery'), 'change',
    function() {
      updateMap(layer, tableId);
    });
}

function updateMap(layer, tableId) {
  var delivery = document.getElementById('delivery').value;
  console.log(delivery + " In Update Map");
  if (delivery) {
    layer.setOptions({
      query: {
        select: "*",
        from: tableId,
        where: "'Boys/Girls' = '" + delivery + "'"
      }
    });
    console.log("tableId=" + tableId + ", delivery=" + delivery);
    console.log(JSON.stringify(layer.get("query")));
  } else {
    layer.setOptions({
      query: {
        select: "*",
        from: tableId
      }
    });
  }
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#googft-mapCanvas {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<label>Boys/Girls?</label>
<select id="delivery">
  <option value="">--Select--</option>
  <option value="Boys">Boys</option>
  <option value="Girls">Girls</option>
</select>
<div id="googft-mapCanvas">

</div>

Fusion Table 过滤器无法更新地图

Fusion Table Filters not able to update map

javascript

google-maps

google-fusion-tables