Google Maps API v3复选框/过滤器数据库 [英] Google Maps API v3 checkbox / filter database
问题描述
我正在建造一个关于房地产的网站。因此，它需要有多个过滤器（城市，邮政编码，卧室，风格等）。
我读了 William的教程，它与我的数据库一起工作。本教程的局限性是我们每个类别都有一个地方。例如：123 Abc St是一个高尔夫球场; 987 Zxy Ave是Theather。就我而言，这个剧院只是另一个过滤器，可能会与高尔夫球场重叠。想想城市和邮编。
我的过滤器（主要是复选框）正在相交。
最后：
1）这是这个吗？查询数据库？
2）该查询是否为视口？
3）KML？
感谢您的时间和帮助。现在我已经坚持了几个星期。
另一个几乎符合法案的例子是这一个。然而，当你点击表面区域中的一个框时（请全部取消选中它们，点击沥青并移动到右侧，然后检查所有困难的列 - 点数越来越大），我认为你应该缩小往右走。沥青可能有10个点（任意数量）。简单的路径将是4，温和3和挑战平衡完全得到10（或任何比例在最后加10）。或10个沥青，5个容易，1个步行。这是我想要完成的。当前网站有不同的路径（或代码）。
您检查的复选框越多，您应用的筛选器就越多。
$ b 更新
贝斯Jobsen：我真的非常感谢您的帮助。我一直被困在复选框问题几周（其他所有工作）。
你做得非常出色！你的代码是优雅的，简洁的...在10行中，我尝试了100行，但没有成功。
我试着学习一些jQuery的基础知识。 W3School ， JQuery ，与一些教程以了解您的代码。 这也很好。
请看这段代码。我改变了一些事情来完成以下任务：
离我的领域更近，因此可以清楚地说明我正在谈论的字段的交集;
1）有没有办法让所有的箱子都没有选中，但所有的标记？尝试HTML，但它没有工作，jQuery对我来说是非常新的。这样，第一个boxchecked将是第一个过滤器&用户不需要取消选中30-40盒（最终网页）。
<2>标记/数组。我真的很天真，我可以认为他们只是一个XML文件或Json？（原因：真正的网页有用户进入Open House的表单，其他人会看到Open House--因此我有Ajax到Server来将数据作为XML或Json，在地图中显示标记/数组）。
因此，我添加了一些真实物品。在改变&&和||一百次，我想再次寻求帮助。我的代码没有正确过滤。尝试了我可以想出的所有选项。
有一个最后的意见：
我有一种过滤而不选中，不同的体验，当所有的都没有选中，并开始复选框来获得标记。看起来我的代码并不反映真正的搜索。这是我的错，不是你的。
以下是新代码（基于您的漂亮而实用的代码 - 谢谢！）
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd >
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no>
< meta charset =utf-8>
< title>标记示例< / title>
< script src =https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false>< / script>
< style>
html，body {
height：100％;
保证金：0;
padding：0;
}
＃map-canvas {
width：500px;
height：300px;
}
< / style>
< / head>
< body>
< div id =map-canvas>< / div>
< div style =float：left;>城市：< br />
< input type =checkboxname =cityvalue =northchecked =/> Northen Territory< br />
< input type =checkboxname =cityvalue =southchecked =/> South Astraulia< br />
< / div>
< div style =float：left;>款式：< br />
< input type =checkboxname =stylevalue =victorianchecked =/> victorian< br />
< input type =checkboxname =stylevalue =craftsmanchecked =/> craftsman< br />
< / div>
< div style =float：left;>类型：< br />
< input type =checkboxname =typevalue =sfhchecked =/> Sinfle Family< br />
< input type =checkboxname =typevalue =condochecked =/> Condo< br />
< input type =checkboxname =typevalue =multichecked =/> Multi< br />
< / div>
< div style =float：left;>卧室：< br />
< input type =checkboxname =bedroomsvalue =1checked =/> 1< br />>
< input type =checkboxname =bedroomsvalue =2checked =/> 2< br />
< input type =checkboxname =bedroomsvalue =3checked =/> 3< br />
< input type =checkboxname =bedroomsvalue =4checked =/> 4< br />
< / div>
< br />
< script src =// ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js\"> ;</script>
< script>
var markersmap = [];
var markers = [];
函数initialize（）{
markers [0] = {long：-25.363882，lat：133.044922，'city'：['north']， '风格'：[ '的维多利亚']， '类型'：[ 'SFH']， '卧室'：[ '1']};
markers [1] = {long：-26.363882，lat：133.044922，'city'：['south']，'style'：['victorian']，'type'：['condo']'卧室 '：[2' ']};
markers [2] = {long：-27.363882，lat：133.044922，'city'：['south']，'style'：['victorian']，'type'：['sfh']，''卧室 '：[' 3' ]};
markers [3] = {long：-28.363882，lat：133.044922，'city'：['south']，'style'：['victorian']，'type'：['sfh']，''卧室 '：[' 4' ]};
markers [4] = {long：-25.363882，lat：130.044922，'city'：['north']，'style'：['craftsman']，'type'：['condo']'卧室 '：[' 1' ]};
marker [5] = {long：-26.363882，lat：130.044922，'city'：['south']，'style'：['craftsman']，'type'：['sfh']，''卧室 '：[2' ']};
marker [6] = {long：-27.363882，lat：130.044922，'city'：['south']，'style'：['craftsman']，'type'：['sfh']，''卧室 '：[' 3' ]};
marker [7] = {long：-28.363882，lat：130.044922，'city'：['south']，'style'：['craftsman']，'type'：['multi']，''卧室 '：[' 4' ]};
var mapOptions = {
zoom：4，
center：new google.maps.LatLng（-25.363882,131.044922），
mapTypeId：google.maps.MapTypeId .ROADMAP
var map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）;
$ .each（markers，function（index，m）{
markersmap [index] = new google.maps.Marker（{
position：new google.maps.LatLng（m.long，m.lat），
map：map
}）;
}）;
jQuery.get（markers，{}，function（）{
jQuery（）。find（marker）。
var latlng = new google.maps.LatLng（
parseFloat（markers.attr（lat）），
parseFloat（markers.attr（long））
） ;
var marker = new google.maps.Marker（{position：latlng，map：map}）;
}）;
}）;
}
google.maps.event.addDomListener（window，'load'，initialize）;
$ b $（input：checkbox）。bind（change，function（）
{
$ .each（markers，function（index，m ）
{
if（
（
（$ .inArray（'south'，m.city）> -1&& $（input ：checkbox [name ='city'] [value ='south']）。is（'：checked'））||
（$ .inArray（'north'，m.city）> -1 & $ amp; $（input：checkbox [name ='city'] [value ='north']）。 b $ b（$ .inArray（'victorian'，m.style）> -1&& $（input：checkbox [name ='style'] [value ='victorian']）。is（' ：checked'））||
（$ .inArray（'craftsman'，m.style）> -1&& $（input：checkbox [name ='style'] [value ='craftsman ''））。）（'：checked'））
）&&
（
（$ .inArray（'sfh'，m.type）> -1& & $（input：checkbox [name ='type'] [value ='sfh']）is（'：checked'））||
（$ .inArray（'condo'，m。类型）&& $（input：checkbox [name ='type'] [value ='condo']）is（'：checked'））||
（$ .inArray（'multi'，m.type）> -1&& $（input：checkbox [name ='type'] [value ='multi']）。is '：checked'））
）&&
（
（$ .inArray（'1'，m.bedrooms）> -1&& $（input：checkbox [name ='bedrooms'] [value ='1']] ）.is（'：checked'））||
（$ .inArray（'2'，m.bedrooms）> -1&& $（input：checkbox [name ='bedrooms' ]（'：checked'））||
（$ .inArray（'3'，m.bedrooms）> -1&& $（input ：checkbox [name ='bedrooms'] [value ='3']）。is（'：checked'））||
（$ .inArray（'4'，m.bedrooms）> -1 &'; $（input：checkbox [name ='bedrooms'] [value ='4']）is（'：checked'））
）
）
{
markersmap [index] .setVisible（true）;
}
else
{
markersmap [index] .setVisible（false）;
}
}）
}）;
< / script>
< / body>
< / html>
正如您所看到的，它在您首次将其加载到地图中时运行良好。但是，一旦所有复选框都清除（未选中），您需要检查所有通往卧室的标记以查看标记。当然，&&解释它，但我尝试了很多组合......
如果我将所有内容都更改为||，当您只点击一个框时，它会正常工作，但当您单击公寓+ 2间卧室时，它会添加。正确的是所有的公寓是2间卧室，不是所有的公寓+所有2间卧室。
几乎每年更新
我决定在php后端执行所有过滤器。 jquery解决方案并不理想。我不确定是否可以用大量的标记和几十个过滤器来进行大规模的测量。做复杂的过滤器是一个流行的问题，从来没有看到完整的答案，并且它是连接所有过滤器的非常复杂的代码。
我的最终路由是服务器端过滤器
为了解决您的问题，我使用jQuery。我还读取并绘制所有标记一次。应用过滤器（取消选中复选框）标记的可见性会发生变化。
首先创建一个带有标记点和属性的数组，如：
var markers = [];
markers [0] = {long：-25.363882，lat：131.044922，'type'：'moutains'，stars：1};
在地图上绘制标记时迭代此数组。这样做的时候，建立第二个数组，引用你的标记和与第一个数组相同的索引：
$。each（markers ，function（index，m）{
markersmap [index] = new google.maps.Marker（{
position：new google.maps.LatLng（m.long， m.lat），
map：map
}）;
}）;
当您的过滤器更改时，会再次迭代第一个数组。检查你的过滤器，并使用第二个数组来改变标记的可见性。
对于每个过滤器，您可以使用如下形式：
$（input [name = stars]：checkbox）。bind（change，function（）{
var typevalue = $ （this）.val（）;
var typechecked = $（this）.is（'：checked'）
$ .each（markers，function（index，m）
{
if（m.stars === parseInt（typevalue））
{
if（typechecked）
{
markersmap [index] .setVisible（true） ;
}
else
{
markersmap [index] .setVisible（false）;
}
}
}）;
}）;
这里的问题是您不想在其他过滤器打开时显示标记（未选中）。
解决这个变化if $（$）$ if $ '] [值=' + m.type +'。]）是（ '：检查'））。如果你有很多过滤器会变得复杂。所以重构这段代码：
$ $ $ $ $ $input：checkbox）。bind（change，function（）
$ b $ .each（markers，function（index，m）
{
if（
$（input：checkbox [name ='stars'] [value = ''+ m.stars +'']）。is（'：checked'）&&
$（input：checkbox [name ='type'] [value ='+ m.type + ''））。is（'：checked'）
）
{
markersmap [index] .setVisible（true）;
}
else
{
markersmap [index] .setVisible（false）;
}
}）
}）;
我不是100％确定这是否也解决了问题：在我的情况下，剧院会是只是另一个过滤器，可以重叠高尔夫球场。
在这个例子中，也许一个标记可以是山脉和沙漠？如果是这样的话，你可以制作你的数组，例如：
markers [0] = {long：-25.363882，lat：131.044922， '类型'：[ '山'， '沙漠']，星：1};
将您的支票更改为：
< $（$：
$（input：checkbox [name ='stars'] [value ='+ m.stars +'']）。is（'：checked '）&&
（
（$ .inArray（'mountains'，m.type）> -1&& $（input：checkbox [name ='type'] [ （'：checked'））||
（$ .inArray（'desert'，m.type）> -1&& $（input：checkbox （'：checked'））
）
）
$ b示例：
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no>
< meta charset =utf-8>
< title>标记示例< / title>
< script src =https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false>< / script>
< style>
html，body {
height：100％;
保证金：0;
padding：0;
}
＃map-canvas {
width：500px;
height：300px;
}
< / style>
< / head>
< body>
< div id =map-canvas>< / div>
< div style =float：left;>类型：< br />
< input type =checkboxname =typevalue =mountainschecked =checked/> Mountains< br />
< input type =checkboxname =typevalue =desertchecked =checked/> Desert< br />
< / div>
< div style =float：left;>星级：< br />
< input type =checkboxname =starsvalue =1checked =checked/> 1< br />>
< input type =checkboxname =starsvalue =2checked =checked/> 2< br />
< input type =checkboxname =starsvalue =3checked =checked/> 3< br />
< / div>
< br />
< script src =// ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js\"> ;</script>
< script>
var markersmap = [];
var markers = [];
函数initialize（）{
markers [0] = {long：-25.363882，lat：131.044922，'type'：['mountains'，'沙漠']，星：1};
markers [1] = {long：-26.363882，lat：132.044922，'type'：['mountains']，stars：1};
markers [2] = {long：-27.363882，lat：133.044922，'type'：['mountains']，stars：2};
marker [3] = {long：-28.363882，lat：133.044922，'type'：['mountains']，stars：2};
markers [4] = {long：-25.363882，lat：130.044922，'type'：['desert']，stars：1};
markers [5] = {long：-26.363882，lat：130.044922，'type'：['desert']，stars：2};
marker [6] = {long：-27.363882，lat：130.044922，'type'：['desert']，stars：3};
markers [7] = {long：-28.363882，lat：130.044922，'type'：['desert']，stars：3};
var mapOptions = {
zoom：4，
center：new google.maps.LatLng（-25.363882,131.044922），
mapTypeId：google.maps.MapTypeId .ROADMAP
var map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）;
$ .each（markers，function（index，m）{
markersmap [index] = new google.maps .Marker（{
position：new google.maps.LatLng（m.long，m.lat），
map：map
}）;
}）;
google.maps.event.addDomListener（window，'load'，initialize）;
$（input：checkbox）。bind（change，function（）
{
$ .each（markers，function（index，m）
（
if（
$（input：checkbox [name ='stars'] [value ='+ m.stars +'']）。is（'：checked'）&& amp ;
（
（$ .inArray（'mountains'，m.type）> -1&& $（input：checkbox [name ='type'] [value ='mountains' ]'）。is（'：checked'））||
（$ .inArray（'desert'，m.type）> -1&& $（input：checkbox [name ='type '）[value ='desert']）。is（'：checked'））
）
）
{
markersmap [index] .setVisible（true）;
}
else
{
markersmap [index] .setVisible（false）;
}
}）
}）;
< / script>
< / body>
< / html>
I am building a site about real estate. As such, it needs to have multiples filters (city, zip code, bedrooms, style, etc.).
I read William's tutorial, and it's working with my database. The limitations of this tutorial is that we have one place per category. Ex: 123 Abc St is a golf course; 987 Zxy Ave is a Theather. In my case, the theater would be just another filter and could overlap golf course. Think of city and zip-code.
My filters (mostly checkboxes) are intersecting. I cannot toggle on and off (not OR, but AND).
Finally:
1) Is this query to database? 2) Is this query to viewport? 3) KML?
Thank you for your time and help. I’ve been stuck on this for a couple of weeks now.
Another example that almost fits the bill is this one. However, when you click a box in the surface field (please uncheck them all, click asphalt and move to the right, and check all in the difficult column - the number of spots get bigger and bigger), I think one should narrow as you go to the right. Asphalt may have 10 spots (any number). Easy trails would be 4, moderate 3 and challenging the balance to get 10 altogether (or any proportion to add 10 at the end). Or 10 asphalt, 5 easy, 1 walking. This is what I am trying to accomplish. The current site has a different path (or code).
The more check boxes you check, the more filters you apply.
UPDATE
Bass Jobsen: I really really appreciate your help. I have been stuck in the checkbox issue for weeks (everything else sort of works).
It's very impressive what you did! Your code is elegant, concise... Does in 10 lines what I was trying with 100 with no success.
I tried to learn some basics of jQuery. W3School, JQuery, played with some tutorials in order to understand your code. This is also very good.
Please look at this code. I changed a few things to accomplish the following: be closer to my field so it can be clear the intersection of fields I was talking about;
1) is there are a way to have all boxes unchecked but all the markers on? Tried with HTML, but it didn't work and jQuery is very new to me. In this way, the first boxchecked would be the first filter & user doesn't need to uncheck 30-40 boxes (the final webpage).
2)Marker/array. Am i being naive that I can consider them just as a XML file or Json ?(Reason: real web page has forms where users enter Open Houses, others will see the Open Houses - therefore I had Ajax to Server to bring data as either XML or Json, display markers/arrays in map).
So I added some "real" items. After changing the && and || a hundred times, I would like to ask for help one more time. My code does not filter properly. Tried all options I could come up with. There is one final observations: I have one sort of filtering while unchecking, different experience when all is unchecked and start to check boxes again to get markers. It seems that my code does not reflect real search. This is my mistake, not yours.
Here is the new code (based in your nice and kind code - Thank you!)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Markers example</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<div id="map-canvas"></div>
<div style="float:left;">City:<br />
<input type="checkbox" name="city" value="north" checked=""/>Northen Territory<br />
<input type="checkbox" name="city" value="south" checked=""/>South Astraulia <br />
</div>
<div style="float:left;">Style:<br />
<input type="checkbox" name="style" value="victorian" checked=""/>victorian<br />
<input type="checkbox" name="style" value="craftsman" checked=""/>craftsman<br />
</div>
<div style="float:left;">Type:<br />
<input type="checkbox" name="type" value="sfh" checked=""/>Sinfle Family<br />
<input type="checkbox" name="type" value="condo" checked=""/>Condo<br />
<input type="checkbox" name="type" value="multi" checked=""/>Multi<br />
</div>
<div style="float:left;">Bedrooms:<br />
<input type="checkbox" name="bedrooms" value="1" checked=""/>1<br />
<input type="checkbox" name="bedrooms" value="2" checked=""/>2<br />
<input type="checkbox" name="bedrooms" value="3" checked=""/>3<br />
<input type="checkbox" name="bedrooms" value="4" checked=""/>4<br />
</div>
<br />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var markersmap = [];
var markers = [];
function initialize() {
markers[0] = {long:-25.363882,lat:133.044922,'city':['north'],'style':['victorian'],'type':['sfh'],'bedrooms':['1']};
markers[1] = {long:-26.363882,lat:133.044922,'city':['south'],'style':['victorian'],'type':['condo'],'bedrooms':['2']};
markers[2] = {long:-27.363882,lat:133.044922,'city':['south'],'style':['victorian'],'type':['sfh'],'bedrooms':['3']};
markers[3] = {long:-28.363882,lat:133.044922,'city':['south'],'style':['victorian'],'type':['sfh'],'bedrooms':['4']};
markers[4] = {long:-25.363882,lat:130.044922,'city':['north'],'style':['craftsman'],'type':['condo'],'bedrooms':['1']};
markers[5] = {long:-26.363882,lat:130.044922,'city':['south'],'style':['craftsman'],'type':['sfh'],'bedrooms':['2']};
markers[6] = {long:-27.363882,lat:130.044922,'city':['south'],'style':['craftsman'],'type':['sfh'],'bedrooms':['3']};
markers[7] = {long:-28.363882,lat:130.044922,'city':['south'],'style':['craftsman'],'type':['multi'],'bedrooms':['4']};
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882,131.044922),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
$.each(markers, function(index, m) {
markersmap[index] = new google.maps.Marker({
position: new google.maps.LatLng(m.long,m.lat),
map: map
});
});
jQuery.get(markers, {}, function() {
jQuery().find("marker").each(function() {
var markers = jQuery(this);
var latlng = new google.maps.LatLng(
parseFloat(markers.attr("lat")),
parseFloat(markers.attr("long"))
);
var marker = new google.maps.Marker({position: latlng, map: map});
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$("input:checkbox").bind( "change", function()
{
$.each(markers, function(index, m)
{
if(
(
($.inArray('south',m.city)>-1 && $("input:checkbox[name='city'][value='south']").is(':checked')) ||
($.inArray('north',m.city)>-1 && $("input:checkbox[name='city'][value='north']").is(':checked'))
) &&
(
($.inArray('victorian',m.style)>-1 && $("input:checkbox[name='style'][value='victorian']").is(':checked')) ||
($.inArray('craftsman',m.style)>-1 && $("input:checkbox[name='style'][value='craftsman']").is(':checked'))
) &&
(
($.inArray('sfh',m.type)>-1 && $("input:checkbox[name='type'][value='sfh']").is(':checked')) ||
($.inArray('condo',m.type)>-1 && $("input:checkbox[name='type'][value='condo']").is(':checked')) ||
($.inArray('multi',m.type)>-1 && $("input:checkbox[name='type'][value='multi']").is(':checked'))
)&&
(
($.inArray('1',m.bedrooms)>-1 && $("input:checkbox[name='bedrooms'][value='1']").is(':checked')) ||
($.inArray('2',m.bedrooms)>-1 && $("input:checkbox[name='bedrooms'][value='2']").is(':checked')) ||
($.inArray('3',m.bedrooms)>-1 && $("input:checkbox[name='bedrooms'][value='3']").is(':checked')) ||
($.inArray('4',m.bedrooms)>-1 && $("input:checkbox[name='bedrooms'][value='4']").is(':checked'))
)
)
{
markersmap[index].setVisible(true);
}
else
{
markersmap[index].setVisible(false);
}
})
});
</script>
</body>
</html>
As you can see, it works well as you first load it in the map. But once all check boxes are clear (not checked), you need to check all the way to bedroom to see the markers. Of Course, && explains it, but I tried many combinations... If I change everything to ||, it works right when you click only one box, but it adds when you click condo + 2 bedroom. The right thing is all condos that are 2 bedrooms, not all condos + all 2 bedrooms.
UPDATE AFTER ALMOST A YEAR I decided to do all filters in the backend with php. The jquery solution was not ideal. And I am not sure if it was even possible to do that in a large scale with hundredes of markers and dozens of filters. Doing complex filters is a popular question, never saw a full answer, and it was a very complicated code to concatenate all filters. My final route was server side filter
To show a solution for your problem i use jQuery. I also read and draw all the markers once. When a filter is applied (uncheck a checkbox) the visibilty of the marker changed.
First create a array with marker points and properties like:
var markers = [];
markers[0] = {long:-25.363882,lat:131.044922,'type':'moutains',stars:1};
Iterate this array when you draw a marker on the map. When doing this build a second array with refereces to your markers and the same index as the first array:
$.each(markers, function(index, m) {
markersmap[index] = new google.maps.Marker({
position: new google.maps.LatLng(m.long,m.lat),
map: map
});
});
When your filters change iterate the first array again. Check your filters and use the second array to change the visibilty of the markers.
For each filter you can use something like:
$("input[name=stars]:checkbox").bind( "change", function() {
var typevalue = $(this).val();
var typechecked = $(this).is(':checked')
$.each(markers, function(index, m)
{
if(m.stars===parseInt(typevalue))
{
if(typechecked)
{
markersmap[index].setVisible(true);
}
else
{
markersmap[index].setVisible(false);
}
}
});
});
The problem here is you don't want to show the marker when a other filter is on (unchecked).
To solve this change if(typechecked) to if(typechecked && $("input:checkbox[name='type'][value='"+m.type+"']").is(':checked')). If you got a lot of filters this become to complex. So refactor this code to:
$("input:checkbox").bind( "change", function()
{
$.each(markers, function(index, m)
{
if(
$("input:checkbox[name='stars'][value='"+m.stars+"']").is(':checked') &&
$("input:checkbox[name='type'][value='"+m.type+"']").is(':checked')
)
{
markersmap[index].setVisible(true);
}
else
{
markersmap[index].setVisible(false);
}
})
});
I'm not 100% sure if this also fix: "In my case, the theater would be just another filter and could overlap golf course". Maybe one marker can be mountains AND desert in this example? If so you could make array of your poperties like:
markers[0] = {long:-25.363882,lat:131.044922,'type':['mountains','desert'],stars:1};
change your check in this case to:
if(
$("input:checkbox[name='stars'][value='"+m.stars+"']").is(':checked') &&
(
($.inArray('mountains',m.type)>-1 && $("input:checkbox[name='type'][value='mountains']").is(':checked')) ||
($.inArray('desert',m.type)>-1 && $("input:checkbox[name='type'][value='desert']").is(':checked'))
)
)
Example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Markers example</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<div id="map-canvas"></div>
<div style="float:left;">Type:<br />
<input type="checkbox" name="type" value="mountains" checked="checked"/>Mountains<br />
<input type="checkbox" name="type" value="desert" checked="checked"/>Desert<br />
</div>
<div style="float:left;">Stars:<br />
<input type="checkbox" name="stars" value="1" checked="checked"/>1<br />
<input type="checkbox" name="stars" value="2" checked="checked"/>2<br />
<input type="checkbox" name="stars" value="3" checked="checked"/>3<br />
</div>
<br />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var markersmap = [];
var markers = [];
function initialize() {
markers[0] = {long:-25.363882,lat:131.044922,'type':['mountains','desert'],stars:1};
markers[1] = {long:-26.363882,lat:132.044922,'type':['mountains'],stars:1};
markers[2] = {long:-27.363882,lat:133.044922,'type':['mountains'],stars:2};
markers[3] = {long:-28.363882,lat:133.044922,'type':['mountains'],stars:2};
markers[4] = {long:-25.363882,lat:130.044922,'type':['desert'],stars:1};
markers[5] = {long:-26.363882,lat:130.044922,'type':['desert'],stars:2};
markers[6] = {long:-27.363882,lat:130.044922,'type':['desert'],stars:3};
markers[7] = {long:-28.363882,lat:130.044922,'type':['desert'],stars:3};
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882,131.044922),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
$.each(markers, function(index, m) {
markersmap[index] = new google.maps.Marker({
position: new google.maps.LatLng(m.long,m.lat),
map: map
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$("input:checkbox").bind( "change", function()
{
$.each(markers, function(index, m)
{
if(
$("input:checkbox[name='stars'][value='"+m.stars+"']").is(':checked') &&
(
($.inArray('mountains',m.type)>-1 && $("input:checkbox[name='type'][value='mountains']").is(':checked')) ||
($.inArray('desert',m.type)>-1 && $("input:checkbox[name='type'][value='desert']").is(':checked'))
)
)
{
markersmap[index].setVisible(true);
}
else
{
markersmap[index].setVisible(false);
}
})
});
</script>
</body>
</html>
这篇关于Google Maps API v3复选框/过滤器数据库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
