php - Google Maps API v3 チェックボックス / フィルタデータベース

Question

不動産に関するサイトを作っています。そのため、複数のフィルター (都市、郵便番号、寝室、スタイルなど) が必要です。

William のチュートリアルを読みましたが、データベースで動作しています。このチュートリアルの制限は、カテゴリごとに 1 つの場所しかないことです。例: 123 Abc St はゴルフコースです。987 Zxy Ave は Theather です。私の場合、劇場はもう 1 つのフィルターであり、ゴルフコースと重複する可能性があります。都市と郵便番号を考えてみてください。

フィルター (ほとんどの場合、チェックボックス) が交差しています。オンとオフを切り替えることができません (OR ではなく AND)。

ついに：

1) このクエリはデータベースですか? 2) このクエリはビューポートですか? 3) KML?

お時間をいただき、ありがとうございました。私はこれで数週間立ち往生しています。

法案にほぼ適合する別の例は、これです。ただし、サーフェスフィールドのボックスをクリックすると（すべてのチェックを外し、アスファルトをクリックして右に移動し、難しい列のすべてをチェックしてください-スポットの数がどんどん大きくなります）、右に行きます。アスファルトには 10 個のスポット (任意の数) があります。簡単なトレイルは 4、中程度の 3 で、全体で 10 (または最後に 10 を追加する任意の割合) になるようバランスに挑戦します。または、アスファルト 10、イージー 5、ウォーキング 1。これが私が達成しようとしていることです。現在のサイトのパス (またはコード) が異なります。

オンにするチェックボックスが多いほど、適用するフィルターが多くなります。

アップデート

バス・ジョブセン: 本当にお世話になりました。私は何週間もチェックボックスの問題で立ち往生しています（他のすべてはうまくいきます）。

あなたがしたことはとても印象的です！あなたのコードはエレガントで簡潔です...私が100で試していたことを10行で実行しますが、成功しません。

jQuery の基本をいくつか学ぼうとしました。W3School、JQueryは、コードを理解するためにいくつかのチュートリアルを試しました。これもとても良いです。

このコードを見てください。私は次のことを達成するためにいくつかの変更を加えました。

1) すべてのボックスをオフにして、すべてのマーカーをオンにする方法はありますか? HTML で試してみましたが、うまくいきませんでした。jQuery は私にとって非常に新しいものです。このように、最初にチェックされたボックスが最初のフィルターになり、ユーザーは 30 ～ 40 個のボックス (最終的な Web ページ) のチェックを外す必要はありません。

2) マーカー/アレイ。それらをXMLファイルまたはJsonと見なすことができるのは素朴ですか？（理由：実際のWebページには、ユーザーがオープンハウスに入るフォームがあり、他のユーザーはオープンハウスを見ることができます-したがって、Ajax to ServerでデータをXMLとして取得しましたまたは Json、マップにマーカー/配列を表示します)。

だから私はいくつかの「本物の」アイテムを追加しました。&& と || を変更した後百回、もう一度助けを求めたい。コードが正しくフィルタリングされません。私が思いつくことができるすべてのオプションを試しました。最終的な観察事項が 1 つあります。チェックを外しているときに 1 種類のフィルタリングがあり、すべてのチェックを外したときに別の経験があり、マーカーを取得するためにボックスを再度チェックし始めました。私のコードは実際の検索を反映していないようです。これは私のミスであって、あなたのミスではありません。

これが新しいコードです（あなたの素敵で親切なコードに基づいています-ありがとう！）

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

ご覧のとおり、最初にマップにロードするとうまく機能します。しかし、すべてのチェックボックスがオフ (チェックされていない) になったら、ベッドルームまでずっとチェックしてマーカーを表示する必要があります。もちろん && で説明しますが、いろいろな組み合わせを試してみました... すべてを || に変更すると、ボックスを 1 つだけクリックすると正しく機能しますが、コンドミニアム + 2 ベッドルームをクリックすると追加されます。正しいのは、すべてのコンドミニアムが 2 ベッドルームであり、すべてのコンドミニアム + すべての 2 ベッドルームではありません。

ほぼ1年後に更新 バックエンドですべてのフィルターをphpで実行することにしました。jquery ソリューションは理想的ではありませんでした。そして、何百ものマーカーと何十ものフィルターを使って大規模にそれを行うことが可能であったかどうかさえわかりません. 複雑なフィルターを実行することはよくある質問ですが、完全な答えは見られず、すべてのフィルターを連結するのは非常に複雑なコードでした。私の最終的なルートはサーバー側のフィルターでした

score 2 · Accepted Answer

問題の解決策を示すために、jQuery を使用します。また、すべてのマーカーを一度読み取って描画します。フィルターが適用されると (チェックボックスをオフにする)、マーカーの可視性が変更されます。

最初に、次のようなマーカーポイントとプロパティを含む配列を作成します。

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

地図上にマーカーを描画するときは、この配列を繰り返します。これを行うと、マーカーへの参照と最初の配列と同じインデックスを持つ2番目の配列を構築します。

$.each(markers, function(index, m) {


  markersmap[index] = new google.maps.Marker({
  position: new google.maps.LatLng(m.long,m.lat),
  map: map

  });   

});

フィルターが変更されたら、最初の配列をもう一度繰り返します。フィルターを確認し、2 番目の配列を使用してマーカーの可視性を変更します。

各フィルターには、次のようなものを使用できます。

    $("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% わかりません。この例では、1 つのマーカーが山と砂漠である可能性がありますか? もしそうなら、次のような poperties の配列を作成できます。

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 チェックボックス / フィルタ データベース

1 に答える 1

Related

Reference

php - Google Maps API v3 チェックボックス / フィルタデータベース