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

查询无效（您需要在列名前后的＆＃39;）

function diffArray(arr1, arr2) {
    return arr1.concat(arr2).filter(function (val) {
        if (!(arr1.includes(val) && arr2.includes(val)))
            return val;
    });
}

diffArray([1, 2, 3, 7], [3, 2, 1, 4, 5]);    // return [7, 4, 5]

应该是：

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

proof of concept fiddle

代码段

＆＃13;

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

＆＃13;

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);

＆＃13;

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

＆＃13;

Fusion Table过滤器无法更新地图

1 个答案: