我将两个示例合并为一个，第一个示例用于Fusion Tables Layers Update Query from dropdown menu，第二个示例是Fusion tables hover and click polygons的geocodezip示例。
一切正常（悬停并点击多边形，updateMap函数等），除了当我想从下拉菜单中选择值时，我的查询不起作用，但是当我删除WHERE子句时，我的查询工作正常。我知道我在查询中遇到了一些问题，过去24小时我一直在解决这个问题，但没有成功，有没有人有任何建议？ 我的整个代码如下所示。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Fusion Tables Layer Example: Update Query from dropdown menu and Mouseover Map Styles</title>
<style type="text/css">
<!--
.style1 {
font-size: 13px;
color: #333333;
font-weight: bold;
}
.style2 {
font-size: 10px;
color: #333333;
}
-->
</style>
</head>
<body>
<link href="/apis/fusiontables/docs/samples/style/default.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var tableId = '1m13iFNXZhKPYKWVTKSVoa8mPxlCrQpNzkpsM4ys';
var tableId2 = '18VSkr75quvARXc7s2xMZ9T4PJH84Ffbua-x4klw';
var colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00'];
var map;
var geometry = 'geometry';
function initialize() {
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(-40.979898,173.305662),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
myOptions);
var layer = new google.maps.FusionTablesLayer({
query: {
select: geometry,
from: tableId
},
styles: [{
polygonOptions: {
strokeColor: "#333333",
strokeOpacity: 0.8,
strokeWeight: 0.7,
fillColor: "#006600",
fillOpacity: 0.3
}
}],
map: map
});
google.maps.event.addDomListener(document.getElementById('regional_council'),
'change', function() {
updateMap(layer, layer2, tableId, tableId2, geometry);
});
// Initialize JSONP request
var layer2 = document.createElement('script');
var url = ['https://www.googleapis.com/fusiontables/v1/query?'];
url.push('sql=');
var query = 'SELECT name, geometry FROM ' + tableId2 + 'WHERE regional_council = "+ regional_council +"';
var encodedQuery = encodeURIComponent(query);
url.push(encodedQuery);
url.push('&callback=drawMap');
url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');
layer2.src = url.join('');
var body = document.getElementsByTagName('body')[0];
body.appendChild(layer2);
}
function createPolygon(country,id)
{
google.maps.event.addListener(country, 'mouseover', function() {
this.setOptions({fillOpacity: 1});
});
google.maps.event.addListener(country, 'mouseout', function() {
this.setOptions({fillOpacity: 0.3});
});
google.maps.event.addListener(country, 'click', function() {
document.getElementById('content-window').innerHTML = id;
});
}
function drawMap(data) {
var rows = data['rows'];
for (var i in rows) {
if (rows[i][0] != 'Antarctica') {
var id = rows[i][0];
var newCoordinates = [];
var geometries = rows[i][1]['geometries'];
if (geometries) {
for (var j in geometries) {
newCoordinates.push(constructNewCoordinates(geometries[j]));
}
} else {
newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);
}
var randomnumber = Math.floor(Math.random() * 4);
var country = new google.maps.Polygon({
paths: newCoordinates,
strokeColor: colors[randomnumber],
strokeOpacity: 0,
strokeWeight: 1,
fillColor: colors[randomnumber],
fillOpacity: 0.3
});
createPolygon(country,id);
country.setMap(map);
}
}
}
function constructNewCoordinates(polygon) {
var newCoordinates = [];
var coordinates = polygon['coordinates'][0];
for (var i in coordinates) {
newCoordinates.push(
new google.maps.LatLng(coordinates[i][1], coordinates[i][0]));
}
return newCoordinates;
}
function updateMap(layer, layer2, tableId, tableId2, geometry) {
var regional_council = document.getElementById('regional_council').value;
if (regional_council) {
layer.setMap(null);
layer2.setMap(map);
} else {
layer.setMap(map);
layer2.setMap(null);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas" style="position:absolute; left:365px; top:30px; width:800px; height:825px; border-style:solid; border-width:1px; border-color:#333333;"></div>
<div id="panel_1" style="position:absolute; left:10px; top:30px; width:200px; height:50px;" class="style1">Select Regional Council:</span><br>
<span class="style2">*Select Regional Council from the list</span></div>
<div id="panel_2" style="position:absolute; left:210px; top:30px; width:150px; height:50px;">
<select id="regional_council">
<option value="">--Select--</option>
<option value="Auckland">Auckland</option>
<option value="Bay of Plenty">Bay of Plenty</option>
<option value="Canterbury">Canterbury</option>
<option value="Gisborne">Gisborne</option>
<option value="Hawkes Bay">Hawke's Bay</option>
<option value="Manawatu-Wanganui">Manawatu-Wanganui</option>
<option value="Marlborough">Marlborough</option>
<option value="Nelson">Nelson</option>
<option value="Northland">Northland</option>
<option value="Otago">Otago</option>
<option value="Southland">Southland</option>
<option value="Taranaki">Taranaki</option>
<option value="Waikato">Waikato</option>
<option value="Wellington">Wellington</option>
<option value="West Coast">West Coast</option>
</select>
</div>
<div id="panel_3" style="position:absolute; left:10px; top:90px; width:200px; height:50px;"><span class="style1">Select Area Unit:</span><br>
<span class="style2">*Select Area Unit by clicking on the Polygon</span></div>
<div id="content-window" style="position:absolute; left:210px; top:90px; width:150px; height:50px; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000;"></div>
</body>
</html>