Я строю сайт о недвижимости. Таким образом, он должен иметь кратные фильтры (город, почтовый индекс, спальни, стиль и т. Д.).
Я читал учебник Уильяма , и он работает с моей базой данных. Ограничения этого учебника заключаются в том, что у нас есть одно место для каждой категории. Пример: 123 Abc St – поле для гольфа; 987 Zxy Ave – это Theather. В моем случае театр был бы еще одним фильтром и мог бы пересекать поле для гольфа. Подумайте о городе и почтовом коде.
Мои фильтры (в основном, флажки) пересекаются. Я не могу включать и выключать (не OR, но AND).
В заключение:
1) Является ли этот запрос базой данных? 2) Является ли этот запрос для просмотра? 3) KML?
Спасибо за ваше время и помощь. Я застрял на этом пару недель.
Другим примером, который почти соответствует законопроекту, является этот . Однако, когда вы щелкаете коробкой в поле поверхности (пожалуйста, снимите все их флажки, нажмите асфальт и перейдите вправо, и проверьте все в сложной колонке – количество пятен становится все больше и больше), я думаю, что нужно сузить, как вы Идите направо. Асфальт может иметь 10 точек (любое число). Легкие трассы будут 4, умеренные 3 и бросают вызов равновесию, чтобы получить 10 в целом (или любую пропорцию, чтобы добавить 10 в конце). Или 10 асфальтов, 5 легких, 1 ходьба. Это то, чего я пытаюсь выполнить. Текущий сайт имеет другой путь (или код).
Чем больше флажков вы проверяете, тем больше фильтров вы применяете.
ОБНОВИТЬ
Басс Джессен: Я действительно очень ценю вашу помощь. Я застрял в вопросе флажка в течение нескольких недель (все остальное вроде работ).
Очень впечатляет то, что вы сделали! Ваш код элегантный, лаконичный … Делает в 10 строках то, что я пытался с 100 без успеха.
Я попытался изучить некоторые основы jQuery. W3School , JQuery , играл с некоторыми учебниками , чтобы понять ваш код. Это тоже очень хорошо.
Посмотрите на этот код. Я изменил несколько вещей, чтобы выполнить следующее: быть ближе к моему полю, чтобы было ясно, что пересечение полей, о которых я говорил;
1) есть ли способ снять все флажки, но все маркеры? Пробовал с HTML, но это не сработало, и jQuery для меня очень новичок. Таким образом, первый boxchecked будет первым фильтром и пользователю не нужно снимать флажки 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 не было идеальным. И я не уверен, возможно ли это сделать в больших масштабах со столами маркеров и десятками фильтров. Выполнение сложных фильтров является популярным вопросом, никогда не видел полного ответа, и это был очень сложный код для конкатенации всех фильтров. Мой последний маршрут был фильтром на стороне сервера
Чтобы показать решение проблемы, я использую 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); } } }); });
Проблема здесь заключается в том, что вы не хотите показывать маркер, когда включен другой фильтр (unchecked). Чтобы решить это изменение, 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>