你们都还好吗?
我是一个完整的 Fusion Tables API 新手,我被搜索框的设置所困扰。这是我的问题:
目标:我想创建一张地图,显示美式足球队的位置和美式足球球迷俱乐部在比利时的位置。
到目前为止我所做的:本周我开始使用两个不同的叠加层创建这张地图(来自两个不同的融合表:一个包含美式足球队的“俱乐部”表和一个包含美式足球的“球迷”表粉丝俱乐部)。
我还实现了两个复选框,可以打开和关闭每一层。
我卡住的地方:随着比利时粉丝俱乐部的数量将开始增长,我想添加一个搜索框,让我可以只显示至少有 x 个成员的粉丝俱乐部。
这个“过滤器”当然只适用于单个“粉丝”层,而“团队”层需要保持不变。
在我的“粉丝”融合表中,我有一列包含每个粉丝俱乐部的成员数量。
问:有没有办法建立这样一个“搜索框”过滤器,如果我在搜索框中输入“50”,它只会显示至少有 50 个成员的粉丝俱乐部?
(所以基本上,我对表格进行的查询将取决于我在搜索框中输入的值。)
我已经尝试遵循几篇文章的指南,但我完全陷入困境:http: //gmaps-samples.googlecode.com/svn/trunk/fusiontables/change_query_text_input.html https://developers.google.com/fusiontables/文档/样本/自动完成
我已经在附件中添加了到目前为止的代码。如果有人能帮助我解决这个问题,我将不胜感激:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<h3>American Football in Belgium</h3>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?key=AIzaSyDjB2uAt9B6cFcUiJAgANg63qNQtiF6v24&sensor=false"></script>
<script type="text/javascript">
function toggleLayer(this_layer){
if(this_layer.getMap()) {
this_layer.setMap(null)
} else {
this_layer.setMap(map);
}
}
var layer1=null;
var layer2=null;
var map=null;
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), {
center: new google.maps.LatLng(50.809406, 4.498901),
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer1 = new google.maps.FusionTablesLayer({
query: {
select: 'Fans Location',
from:'1_n9DXwEAdVtmHhvypRxpjgk7DMJVbmBbYgsUfdQ'
},
map: map
});
layer2 = new google.maps.FusionTablesLayer({
query: {
select: 'Club Location',
from:'1waRLQMKE1bJKNT4qBesLQUNcjbezPeln6z1XQKA'
},
map: map
});
}
</script></head>
<body onload="initialize();">
<div>
<input type="checkbox" id="show_hide_layer1" checked onchange="toggleLayer(layer1)"/>
<label> Fans </label>
<input type="checkbox" id="show_hide_layer2" checked onchange="toggleLayer(layer2)"/>
<label> Clubs </label>
</div>
<div id="map_canvas" style="width:80%; height:80%"></div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
</body>
</html>
非常感谢你的帮助!
有一个愉快的星期六,
安迪