Javascript FusionTables更新查询不工作
我正在用一个下拉菜单建立一个Fusionables地图。我希望地图上的标记根据用户在下拉菜单中的选择进行更改。每个菜单选择对应于Fusion表中可能性列的三个选项。我使用这些链接作为参考： 及 我已经复制了代码，到目前为止，我可以获得所有要显示的选项，但它不会根据用户选择过滤结果。我相信这很简单。有什么想法吗 以下是迄今为止的代码：Javascript FusionTables更新查询不工作,javascript,google-fusion-tables,Javascript,Google Fusion Tables,我正在用一个下拉菜单建立一个Fusionables地图。我希望地图上的标记根据用户在下拉菜单中的选择进行更改。每个菜单选择对应于Fusion表中可能性列的三个选项。我使用这些链接作为参考： 及 我已经复制了代码，到目前为止，我可以获得所有要显示的选项，但它不会根据用户选择过滤结果。我相信这很简单。有什么想法吗 以下是迄今为止的代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Test Page 18</title>
<link href="/apis/fusiontables/docs/samples/style/default.css"
rel="stylesheet" type="text/css">
<style>
body {
font-family: sans-serif;
background-image: url(images/squairy_light.png);
}
#main-container {
border: 1px solid;
border-color: #E0E0E0;
width:1280px;
margin: auto;
border-radius:3px;
padding-top: 15px;
background-color: white;
}
#map-canvas {
width:1250px;
height:600px;
margin: auto;
}
#drop-down {
width:1250px;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
}
#title {
width:1280px;
margin: auto;
padding-top: 10px;
font: sans-serif;
}
.layer-wizard-search-label { font-family: sans-serif };
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="/path/to/fusiontips_compiled.js" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var tableId = '1JEUbXBVguPhTwEPncLV0GkF49Tp3ImCooKGGADQ';
var locationColumn = 'Lat/Long';
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(40, 345),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: locationColumn,
from: tableId,
},
map: map,
});
google.maps.event.addDomListener(document.getElementById('option-list'),
'change', function() {
updateMap(layer, tableId, locationColumn);
});
}
// Update the query sent to the Fusion Table Layer based on
// the user selection in the select menu
function updateMap(layer, tableId, locationColumn) {
var delivery = document.getElementById('option-list').value;
if (delivery) {
layer.setOptions({
query: {
select: locationColumn,
from: tableId,
where: "option-list = '" + delivery + "'"
}
});
} else {
layer.setOptions({
query: {
select: locationColumn,
from: tableId
}
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="title"><h1>Possibility Options</h1></div>
<div id="main-container">
<div id="map-canvas"></div>
<div id="drop-down">
<label>Possibilities:</label>
<select id="option-list">
<option value="">--All Possibilities--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="Maybe">Maybe</option>
</select>
</div>
</div>
</body>
</html>
我不知道我之前发布的代码有什么问题。我发现这个链接帮助我以不同的方式编写并解决了我的问题：
请将您的答案作为答案发布，而不是作为问题的一部分。如果您描述了问题是什么以及是什么解决了问题，这也会很有用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Test Page 18</title>
<link href="/apis/fusiontables/docs/samples/style/default.css"
rel="stylesheet" type="text/css">
<style>
body {
font-family: sans-serif;
background-image: url(images/squairy_light.png);
}
#main-container {
border: 1px solid;
border-color: #E0E0E0;
width:1280px;
margin: auto;
border-radius:3px;
padding-top: 15px;
background-color: white;
}
#map-canvas {
width:1250px;
height:600px;
margin: auto;
}
#drop-down {
width:1250px;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
}
#title {
width:1280px;
margin: auto;
padding-top: 10px;
font: sans-serif;
}
.layer-wizard-search-label { font-family: sans-serif };
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="/path/to/fusiontips_compiled.js" type="text/javascript"></script>
<script type="text/javascript">
var tableId = '1JEUbXBVguPhTwEPncLV0GkF49Tp3ImCooKGGADQ';
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'Lat/Long',
from: tableId,
},
styleId: 2,
templateId: 2,
});
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(40, 345),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer.setMap(map);
}
//Change the query based on the user's selection
function changeMap() {
possibility = document.getElementById('Possibility').value;
where = " Possibility LIKE '%" + possibility + "%'";
layer.setOptions({
query: {
select: 'Lat/Long',
from: tableId,
where: where
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="title"><h1>Possibility Options</h1></div>
<div id="main-container">
<div id="map-canvas"></div>
<div id="drop-down">
<label for="Possibility">Possibilities:</label>
<select id="Possibility" onChange="changeMap();">
<option value="">--All Possibilities--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="Maybe">Maybe</option>
</select>
</div>
</div>
</body>
</html>