Javascript 融合表过滤器无法更新映射

Javascript 融合表过滤器无法更新映射,javascript,google-maps,google-fusion-tables,Javascript,Google Maps,Google Fusion Tables,下面是我的代码附件。地图只加载一次,但在更新图层查询后不会加载 如果有人能尽快给我一个解决方案,请告诉我 选择该选项后,将始终加载默认地图,这是主要问题。 不生成根据过滤器绘制的贴图 <!DOCTYPE html> <html> <head> <meta name="viewport"></meta> <title>Rise Project (Responses) - Google Fusion Tables</tit

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

如果有人能尽快给我一个解决方案,请告诉我 选择该选项后,将始终加载默认地图,这是主要问题。 不生成根据过滤器绘制的贴图

<!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>

该查询无效。在列名之前和之后需要一个“0”:

where: "Boys/Girls = '" + delivery + "'"
应该是:

where: "'Boys/Girls' = '" + delivery + "'"
代码段:

函数初始化{ var tableId='1hVh2fZH52W9qCM4rMnqzjG6z3lPM5B970H__hLUn'; var isMobile=navigator.userAgent.toLowerCase.indexOf'android'>-1|| navigator.userAgent.match/iPod | iPhone | iPad | BlackBerry | Windows Phone | iemobile/; 如果是移动的{ var viewport=document.querySelectormeta[name=viewport]; setAttribute'content','initialscale=1.0,user scalable=no'; } var mapDiv=document.getElementById'googft-mapCanvas'; var map=new google.maps.mapdiv{ 中心:新google.maps.LatLng30.376556001284677.97422298410743, 缩放:12, mapTypeId:google.maps.mapTypeId.ROADMAP }; map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].pushdocument.getElementById'googft-legend-open'; map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].pushdocument.getElementById'googft-legend'; 图层=新建google.maps.FusionTablesLayer{ 地图:地图, 热图:{ 已启用:false }, 查询:{ 选择:*, 发件人:tableId }, 选项:{ styleId:2, 模板ID:3 } }; console.logJSON.stringifylayer.getquery; google.maps.event.AddDomainListenerDocument.getElementById'delivery'、'change', 作用{ updateMaplayer,tableId; }; } 函数updateMaplayer,tableId{ var delivery=document.getElementById'delivery'。值; 更新地图中的console.logdelivery+; 如果交付{ layer.setOptions{ 查询:{ 选择:*, 发件人:tableId, 其中:'男孩/女孩'='+送货+' } }; console.logtableId=+tableId+,delivery=+delivery; console.logJSON.stringifylayer.getquery; }否则{ layer.setOptions{ 查询:{ 选择:*, 发件人:tableId } }; } } google.maps.event.AddDomainListenerWindow“加载”,初始化; html, 身体 谷歌地图画布{ 身高:100%; 保证金:0; 填充:0; 宽度:100%; } 男孩/女孩? -挑选- 男孩 姑娘们