php - Google Maps API v3 复选框/过滤器数据库

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

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

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

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

最后:

1)这是对数据库的查询吗？
2)这个查询是视口(viewport)吗？
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，在 map 中显示标记/数组)。

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

这是新代码(基于您的好代码 - 谢谢!)

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

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

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

最佳答案

为了显示您的问题的解决方案，我使用 jQuery。我还阅读并绘制了所有标记一次。应用过滤器(取消选中复选框)时，标记的可见性会发生变化。

首先创建一个带有标记点和属性的数组，例如:

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

在 map 上绘制标记时迭代此数组。这样做时，构建第二个数组，其中包含对标记的引用以及与第一个数组相同的索引:
$.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>

关于php - Google Maps API v3 复选框/过滤器数据库，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16499455/

上一篇：mysql - 复合主键和自动增量列但不是主键

下一篇：MySQL 大量记录的性能 - 分区？

相关文章：

MySQL销售数据按月平均分组

mysql - 排行榜位置SQL优化

php - Laravel 4 基准测试我的查询

java - 我有一个用java编程编写的函数，我想将其转换为php

javascript - 如何打开 Bootstrap Carousel 幻灯片以在滚动时更改？

Javascript:如何保护您的代码

php - 如何创建表行作为选择选项

php - 将一个应用程序连接到另一个应用程序的数据库时出错

php - 存储列表 : in files or MySQL?

javascript - 错误无法使用node.js和mysql读取未定义的属性

©2024 IT工具网  联系我们