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