目标：能够在Google Fusion地图中一次搜索多个列。
我创建了一个包含三个下拉菜单和一个搜索框（类别，州，年份，搜索框）的地图。问题是每个下拉列表当前都独立于其他下拉列表，这意味着一次只能过滤一列。
我希望能够按类别，州，年份和搜索字词一次过滤多个列。例如，我希望能够在“1997”的“加利福尼亚”和“枪支”一词中搜索“无辜的死亡”。
Google Fusion地图可以实现吗？
我对javascript的经验有限，非常感谢任何帮助。
代码如下。
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layer_0;
var layer_1;
var layer_2;
var layer_3;
function initialize()
{
map = new google.maps.Map(document.getElementById('map-canvas'),
{
center: new google.maps.LatLng(39.14756564151492, -97.12306249999999),
zoom: 4,
mapTypeControl: false,
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer_0 = new google.maps.FusionTablesLayer({
query: {
select: "col3>>0",
from: "1fDfLN7YpE9H7gdGH0ePtJFbwpXy51juTv4-WI24"
},
map: map,
styleId: 2,
templateId: 2
});
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
}
function changeMap_0() {
var whereClause;
var searchString = document.getElementById('search-string_0').value.replace(/'/g, "\\'");
if (searchString != '--Select--') {
whereClause = "'Type' = '" + searchString + "'";
}
layer_0.setOptions({
query: {
select: "col3>>0",
from: "1fDfLN7YpE9H7gdGH0ePtJFbwpXy51juTv4-WI24",
where: whereClause
}
});
}
function changeMap_1() {
var whereClause;
var searchString = document.getElementById('search-string_1').value.replace(/'/g, "\\'");
if (searchString != '--Select--') {
whereClause = "'State' = '" + searchString + "'";
}
layer_0.setOptions({
query: {
select: "col3>>0",
from: "1fDfLN7YpE9H7gdGH0ePtJFbwpXy51juTv4-WI24",
where: whereClause
}
});
}
function changeMap_2() {
var whereClause;
var searchString = document.getElementById('search-string_2').value.replace(/'/g, "\\'");
if (searchString != '--Select--') {
whereClause = "'Year' = '" + searchString + "'";
}
layer_0.setOptions({
query: {
select: "col3>>0",
from: "1fDfLN7YpE9H7gdGH0ePtJFbwpXy51juTv4-WI24",
where: whereClause
}
});
}
function changeMap_3() {
var whereClause;
var searchString = document.getElementById('search-string_3').value.replace(/'/g, "\\'");
if (searchString != '--Select--') {
whereClause = "'Description' CONTAINS IGNORING CASE '" + searchString + "'";
}
layer_0.setOptions({
query: {
select: "col3>>0",
from: "1fDfLN7YpE9H7gdGH0ePtJFbwpXy51juTv4-WI24",
where: whereClause
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<br />
<div style="margin-top: 10px;">
<select id="search-string_0" onchange="changeMap_0(this.value);">
<option value="--Select--">-- Botched Police Raid Category --</option>
<option value="--Select--">All Botched Police Raids</option>
<option value="Death of a nonviolent offender.">Death of a nonviolent offender</option>
<option value="Death of an innocent.">Death of an innocent</option>
<option value="Death or injury of a police officer.">Death or injury of a police officer</option>
<option value="Raid on an innocent suspect.">Raid on an innocent suspect</option>
<option value="Unnecessary raids on doctors and sick people.">Unnecessary raids on doctors and sick people</option>
<option value="Other examples of paramilitary police excess.">Other examples of paramilitary police excess</option>
</select>
<select id="search-string_1" onchange="changeMap_1(this.value);">
<option value="--Select--">-- By State --</option>
<option value="--Select--">All States</option>
<option value="AL" >Alabama</option>
<option value="AK" >Alaska</option>
<option value="AZ" >Arizona</option>
<option value="AR" >Arkansas</option>
<option value="CA" >California</option>
<option value="CO" >Colorado</option>
<option value="CT" >Connecticut</option>
<option value="DE" >Delaware</option>
<option value="DC" >District Of Columbia</option>
<option value="FL" >Florida</option>
<option value="GA" >Georgia</option>
<option value="HI" >Hawaii</option>
<option value="ID" >Idaho</option>
<option value="IL" >Illinois</option>
<option value="IN" >Indiana</option>
<option value="IA" >Iowa</option>
<option value="KS" >Kansas</option>
<option value="KY" >Kentucky</option>
<option value="LA" >Louisiana</option>
<option value="ME" >Maine</option>
<option value="MD" >Maryland</option>
<option value="MA" >Massachusetts</option>
<option value="MI" >Michigan</option>
<option value="MN" >Minnesota</option>
<option value="MS" >Mississippi</option>
<option value="MO" >Missouri</option>
<option value="MT" >Montana</option>
<option value="NE" >Nebraska</option>
<option value="NV" >Nevada</option>
<option value="NH" >New Hampshire</option>
<option value="NJ" >New Jersey</option>
<option value="NM" >New Mexico</option>
<option value="NY" >New York</option>
<option value="NC" >North Carolina</option>
<option value="ND" >North Dakota</option>
<option value="OH" >Ohio</option>
<option value="OK" >Oklahoma</option>
<option value="OR" >Oregon</option>
<option value="PA" >Pennsylvania</option>
<option value="RI" >Rhode Island</option>
<option value="SC" >South Carolina</option>
<option value="SD" >South Dakota</option>
<option value="TN" >Tennessee</option>
<option value="TX" >Texas</option>
<option value="UT" >Utah</option>
<option value="VT" >Vermont</option>
<option value="VA" >Virginia</option>
<option value="WA" >Washington</option>
<option value="WV" >West Virginia</option>
<option value="WI" >Wisconsin</option>
<option value="WY" >Wyoming</option>
</select>
<select id="search-string_2" onchange="changeMap_2(this.value);">
<option value="--Select--">-- By Year --</option>
<option value="--Select--">All Years</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
</select>
<input type="text" id="search-string_3" placeholder=" Keyword Search">
<input type="button" onclick="changeMap_3()" value="Search">
</div>
<div id="map-canvas" style="width:100%; height:500px; line-height: 125%;"></div>
</div>
答案 0 :(得分：2)
问题在于，每次更改任一输入的值时，您运行的函数只有一个更改的值。您可能需要更新changeMap_1（），changeMap_2（）和changeMap_3（）将它们组合成一个函数。
所以调用它changeMap（）并运行以下条件：
if(curr_value of search-string_1 != "--Select--") String s1= curr_value of search-string_1;
if(curr_value of search-string_2 != "--Select--") String s2= curr_value of search-string_2;
if(curr_value of search-string_3 != "--Select--") String s3= curr_value of search-string_3;
然后使用所有三个结果而不是单个结果执行搜索。这样，您就可以保留以前的搜索类别。而不是3 onChange函数，你只需要1。