1

我正在建立一个关于房地产的网站。因此，它需要有多个过滤器（城市、邮政编码、卧室、风格等）。

我阅读了威廉的教程，它正在使用我的数据库。本教程的限制是每个类别只有一个位置。例如：123 Abc St 是一个高尔夫球场；987 Zxy Ave 是一个剧院。就我而言，剧院只是另一个过滤器，可以与高尔夫球场重叠。想想城市和邮政编码。

我的过滤器（主要是复选框）相交。我无法打开和关闭（不是 OR，而是 AND）。

最后：

1）这是对数据库的查询吗？2）这个查询是视口吗？3）KML？

感谢您的时间和帮助。我已经坚持了几个星期了。

另一个几乎符合要求的例子就是这个。但是，当您单击表面字段中的一个框时（请取消选中它们，单击沥青并向右移动，并在困难列中选中所有 - 点的数量越来越大），我认为一个应该随着您缩小向右走。沥青可能有 10 个点（任意数量）。简单的路线是 4 条，中等的 3 条，挑战平衡以总共获得 10 条（或任何比例在最后添加 10 条）。或者 10 个沥青，5 个简单，1 个步行。这就是我想要完成的。当前站点具有不同的路径（或代码）。

您选中的复选框越多，您应用的过滤器就越多。

更新

Bass Jobsen：我非常感谢您的帮助。我已经被复选框问题困住了好几个星期（其他一切都有效）。

你所做的令人印象深刻！您的代码优雅、简洁……我在 10 行中尝试了 100 行但没有成功。

我尝试学习一些 jQuery 的基础知识。W3School和JQuery使用了一些教程来理解您的代码。这也很好。

请看这段代码。我改变了一些事情来完成以下工作：靠近我的领域，以便清楚我所说的领域的交叉点；

1）有没有一种方法可以取消选中所有框但所有标记都打开？尝试使用 HTML，但没有成功，而且 jQuery 对我来说很新。这样，第一个选中的框将是第一个过滤器，用户不需要取消选中 30-40 个框（最终网页）。

2）标记/阵列。我是否天真地认为我可以将它们视为 XML 文件或 Json？（原因：真实网页具有用户输入 Open Houses 的表单，其他人会看到 Open Houses - 因此我有 Ajax 到服务器以将数据作为 XML或 Json，在地图中显示标记/数组）。

所以我添加了一些“真实”的项目。更改 && 和 || 后 一百次，我想再请求一次帮助。我的代码没有正确过滤。尝试了我能想到的所有选项。最后有一个观察结果：我在取消选中时有一种过滤，当所有都未选中时会有不同的体验，然后再次开始选中复选框以获取标记。看来我的代码并没有反映真正的搜索。这是我的错，不是你的。

这是新代码（基于您的好代码 - 谢谢！）

<!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>

如您所见，当您首次将其加载到地图中时，它运行良好。但是一旦所有复选框都清除（未选中），您需要一直检查到卧室才能看到标记。当然，&& 解释了它，但我尝试了很多组合......如果我将所有内容更改为 ||，当您仅单击一个框时它可以正常工作，但是当您单击 condo + 2 卧室时它会添加。正确的是所有公寓都是 2 间卧室，而不是所有公寓 + 所有 2 间卧室。

差不多一年后更新 我决定在后端使用 php.ini 进行所有过滤。jquery 解决方案并不理想。而且我不确定是否有可能用数百个标记和数十个过滤器大规模地做到这一点。做复杂的过滤器是一个流行的问题，从来没有看到完整的答案，它是一个非常复杂的代码来连接所有的过滤器。我的最终路线是服务器端过滤器

4

1 回答 1

2

为了显示您的问题的解决方案，我使用 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(typechecked)为if(typechecked && $("input:checkbox[name='type'][value='"+m.type+"']").is(':checked')). 如果你有很多过滤器，这会变得很复杂。因此，将此代码重构为：

$("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);
        }
    })  
});

我不能 100% 确定这是否也能解决：“就我而言，剧院只是另一个过滤器，可能会与高尔夫球场重叠”。在这个例子中，也许一个标记可以是山脉和沙漠？如果是这样，你可以制作你的数组，如：

markers[0] = {long:-25.363882,lat:131.044922,'type':['mountains','desert'],stars:1};

在这种情况下将您的支票更改为：

    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'))
    )
    )

例子：

<!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>
于 2013-05-11T23:24:54.830 回答