2015-02-11 74 views
0

我想使用上https://developers.google.com/fusiontables/docs/samples/autocomplete自動填充文本搜索示例但是當我更換表ID我得到一個類型錯誤。但是,當我嘗試搜索時,我看不到任何反應。爲什麼我在使用Google Fusion Tables圖層時遇到TypeError:response.getDataTable(...)爲空?

這裏是我的文件:

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

請幫助!

+1

不可能不知道'tableId'回答,可能是列名'庫Name'不存在。但是,[**'response.getMessage()'**](https://developers.google.com/chart/interactive/docs/reference#QueryResponse)可能會告訴您原因。 – 2015-02-11 16:50:19

回答

0

我之所以得到一個類型錯誤是因爲我的查詢中我把庫名稱,而不是庫名,因爲它是在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); 

非常感謝Dr. Molle幫我指出了這個問題。

相關問題