Google Maps API v3複選框/過濾器數據庫

我正在建設一個關於房地產的網站。因此，它需要有多個過濾器（城市，郵政編碼，臥室，風格等）。Google Maps API v3複選框/過濾器數據庫

我看了William's tutorial，它和我的數據庫一起工作。本教程的侷限性是我們每個類別都有一個地方。例如：123 Abc St是一個高爾夫球場; 987 Zxy Ave是Theather。就我而言，這個劇院只是另一個過濾器，可能會與高爾夫球場重疊。想想城市和郵編。

我的過濾器（主要是複選框）正在相交。我無法開啓和關閉（不是或，但是）。

終於：

1）這是查詢數據庫？ 2）此查詢是否爲視口？ 3）KML？

謝謝你的時間和幫助。現在我已經堅持了幾個星期。

另一個幾乎符合法案的例子是this one。然而，當你點擊表面區域中的一個框時（請全部取消選中它們，點擊瀝青並移動到右側，然後檢查所有困難的列 - 點數越來越大），我認爲你應該縮小往右走。瀝青可能有10個點（任意數量）。簡單的路徑將是4，溫和3和挑戰平衡完全得到10（或任何比例在最後加10）。或10個瀝青，5個容易，1個步行。這是我想要完成的。當前網站有不同的路徑（或代碼）。

您檢查的複選框越多，您應用的篩選器越多。

UPDATE

低音Jobsen：我真的很感謝你的幫助。我一直被困在複選框問題幾周（其他所有工作）。

你做得非常出色！你的代碼是優雅的，簡潔的...在10行中，我嘗試了100行，但沒有成功。

我試着學習一些jQuery的基礎知識。 W3School,JQuery，玩了一些tutorials爲了瞭解你的代碼。 This也很好。

請看這段代碼。我改變了幾件事情來完成以下工作：離我的領域更近一些，這樣就可以清楚我所談論的領域的交集;

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//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解決方案並不理想。我不確定是否可以用大量的標記和幾十個過濾器來進行大規模的測量。做複雜的過濾器是一個流行的問題，從來沒有看到完整的答案，並且它是連接所有過濾器的非常複雜的代碼。我的最終路線是服務器端過濾器

來源

2013-05-11 user2060451

爲了顯示您的問題的解決方案，我使用jQuery。我還讀取並繪製所有標記一次。應用過濾器時（取消選中複選框）標記的可見性會發生變化。

首先創建一個標記點和屬性像數組：

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

迭代這個數組當你畫的地圖上的標記。做這件事時建立第二個陣列refereces你的標記和相同的索引第一陣列：

$.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％肯定，如果這還解決：「在我的情況下，影院將只是另一個過濾器和可以重疊高爾夫球場」。在這個例子中，也許一個標記可以是山脈和沙漠？如果是這樣，你可以讓你的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>

來源

2013-05-11 23:24:54

非常感謝你爲你詳細的解答。我有大約5個月的時間做計算機工作（爲房地產人員建立一個交互式網頁），我需要研究你的答案。我會回來的。我有一個服務器（我們說的localhost），其中「人員」可以爲開放式房屋（地址，城市，風格，臥室，浴室，郵政編碼等）插入數據。複選框從服務器過濾數據並將其發送到谷歌。我學過Javascript，但沒有Jquery。我需要一天左右的時間來充分消化你的答案和申請。你有你的標記[1-7]，我會嘗試與我的XML和JSON。非常感謝喲，我會回來的。 – user2060451 2013-05-12 04:53:21

祝你好運，讓我知道如果你有任何進一步的問題 – 2013-05-12 07:44:07

嗨，低音，我只是根據你的非常好的職位更新我的初始職位。你可以看看嗎？非常感謝。 – user2060451 2013-05-13 07:31:57

Google Maps API v3複選框/過濾器數據庫

回答

相關問題