融合表过滤器不能更新地图

Fusion Table Filters not able to update map

本文关键字：更新 新地图 不能 过滤器 融合      更新时间：2023-09-26

下面是我的代码附件。地图被加载一次，但在更新了图层查询后就不加载了

希望有人能尽快给我一个解决方案默认地图总是在选项被选中后加载，这是主要问题。没有根据过滤器生成映射。

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

查询无效(列名前后需要一个'):

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

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

概念验证

代码片段:

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>

相关文章：