Google Maps API v3 复选框/过滤器数据库答案

【问题标题】：Google Maps API v3 checkbox / filter databaseGoogle Maps API v3 复选框/过滤器数据库
【发布时间】：2013-05-06 03:40:28
【问题描述】：

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

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

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

最后：

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

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

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

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

更新

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

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

我尝试学习一些 jQuery 的基础知识。 W3School，JQuery，为了理解你的代码，玩了一些tutorials。 This 也很好。

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

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>

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

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

【问题讨论】：

标签： php javascript mysql google-maps-api-3

【解决方案1】：

为了显示您的问题的解决方案，我使用 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>

【讨论】：

非常感谢您的详细回答。我有大约 5 个月的时间做电脑工作（为房地产人士构建交互式网页），我需要研究你的答案。我会回来的。我有一个服务器（我们所说的本地主机），“人们”可以在其中插入开放日的数据（地址、城市、风格、卧室、浴室、邮政编码等）。复选框从服务器过滤数据并将其发送到谷歌。我学过 Javascript，但没有学过 Jquery。我需要一天左右的时间来完全消化你的回答和申请。如果你有标记 [1-7]，我将尝试使用我的 xml 和 json。非常感谢你，我会回来的。
祝你好运，如果您还有其他问题，请告诉我
嗨，Bass，我刚刚根据您非常友好的帖子更新了我的初始帖子。你能看一下吗？非常感谢。
您的代码在更新“公寓 + 所有 2 间卧室”中未显示，因为未检查类型 sfh