Question

我正在尝试使用https://developers.google.com/fusiontables/docs/samples/autocomplete上的自动填充文本搜索示例，但是当我替换表ID时，我得到一个TypeError。我可以看到我的标记然而当我尝试搜索时没有任何事情发生。

以下是我的文件：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <title>Map Search Engine</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

    <script type="text/javascript">
      google.load('visualization', '1');

      function initialize() {
        var map = new google.maps.Map(document.getElementById('map-canvas'), {
          center: new google.maps.LatLng(51.545032, -0.05642),
          zoom: 10,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var tableId = '1lhqB6x3JubMAvA9zPf3ByzzvgWFamb24xDmH0_op'
       var locationColumn = 'Address';
        var layer = new google.maps.FusionTablesLayer({
          query: {
            select: locationColumn,
            from: tableId
          },
          map: map
        });

        initAutoComplete(tableId);

        // Update layer when user clicks find.
          google.maps.event.addDomListener(document.getElementById('find'), 'click',
              function() {
                var Library = document.getElementById('Library').value;

                if (Library) {
                  Library = Library.replace(/'/g, '\\\'');
                  var where = "'Library Names' CONTAINS IGNORING CASE '" +
                      Library + "'";

                  layer.setOptions({
                    query: {
                      select: locationColumn,
                      from: tableId,
                      where: where
                    }
                  });
                }
          });
        }

        function initAutoComplete(tableId) {
          // Retrieve the unique Library names using GROUP BY workaround.
          var queryText = encodeURIComponent(
              "SELECT 'Library Name', COUNT() " +
              'FROM ' + tableId + " GROUP BY 'Library Name'");
          var query = new google.visualization.Query(
              'http://www.google.com/fusiontables/gvizdata?tq='  + queryText);

          query.send(function(response) {
            var numRows = response.getDataTable().getNumberOfRows();

            // Create the list of results for display of autocomplete.
            var results = [];
            for (var i = 0; i < numRows; i++) {
              results.push(response.getDataTable().getValue(i, 0));
            }

            // Use the results to create the autocomplete options.
            $('#Library').autocomplete({
              source: results,
              minLength: 2
            });
          });
        }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
    <div>
      <input type="text" id="Library">
      <input type="button" value="Find" id="find">
      <small>HINT: Try typing "Dalston"</small>
    </div>
  </body>
</html>

CSS

html {
  height: 100%;
  margin: 0px;
  padding: 0px
}
body {
  font-family: Arial, sans-serif;
  font-size: 12px;
}

#map-canvas {
  height: 500px;
  width: 600px;
}

#visualization {
  height: 400px;
  width: 500px;
}

请帮助!!

Answer 1

我得到TypeError的原因是因为在我的查询中我把库名称而不是库名称放在FusionTable中。

function initAutoComplete(tableId) {
      // Retrieve the unique Library names using GROUP BY workaround.
      var queryText = encodeURIComponent(
          "SELECT 'Library Name', COUNT() " +
          'FROM ' + tableId + " GROUP BY '*Library Name*'");
      var query = new google.visualization.Query(
          'http://www.google.com/fusiontables/gvizdata?tq='  + queryText);

感谢Molle博士帮助我查明问题。

为什么我会在使用Google Fusion Tables图层时获得TypeError：response.getDataTable（...）为null？

1 个答案: