过滤结果与多个下拉框在谷歌融合地图
Filter results with multiple dropdowns in Google Fusion map
目标:能够在Google Fusion地图中一次从多个列进行搜索。
我创建了一个地图，有三个下拉框和一个搜索框(类别，州，年份，搜索框)。问题是每个下拉菜单当前都是独立的，这意味着一次只能过滤一列。
我希望能够一次从多个列中按类别、州、年份和搜索词进行过滤。例如，我希望能够搜索"1997年加利福尼亚"的"无辜者之死"answers"枪"这个词。
这是可能的谷歌融合地图?
我对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>
问题是，每次更改其中一个输入的值时，您只运行了一个更改值的函数。您可能需要更新您的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;
然后使用所有三个结果而不是单个结果执行搜索。这样，您就可以保留以前的搜索类别。您只需要1.
相关文章：
- 使用谷歌融合表格地图的网页文本/JavaScript未显示
- 在谷歌融合中组合 2 个查询
- 谷歌融合表 更改单个标记类型
- 谷歌标记位置选项:从谷歌融合表中检索纬度和经度
- 谷歌融合表查询数据操作
- 从谷歌融合表返回单个值
- 使用谷歌融合创建的标记的多个过滤器
- 谷歌融合表中的自动地理编码位置条目
- 谷歌融合表&地图-检测区域中的地址
- 如何链接一个表单输出到一个谷歌融合表查询使用javascript
- 奇怪的行为谷歌融合表
- 如何映射一个特定的谷歌融合表地图
- maxZoom和风格的谷歌融合地图
- 谷歌融合表where子句
- 使用javascript检索谷歌融合表中的特定单元格
- 放大/缩小时，使用谷歌地图API在谷歌融合表API中更改图标
- 谷歌融合表空间搜索可拖动边界
- 过滤结果与多个下拉框在谷歌融合地图
- 谷歌融合表查询错误-时间比较
- 我如何解析我的几何字段在谷歌融合表缩放到多边形坐标在谷歌地图API V3
