帶谷歌地圖標記過濾器的邊欄

Question

我在我的地圖標記上有一個過濾器，它考慮了多個值。但是，當標記被過濾時，側邊欄不會。我沒有產生任何錯誤，但大約2000條記錄的加載時間超過了200秒。

這裏是爲了使側邊欄的代碼：

function makeSidebar() { 
var html = ""; 
for (var i=0; i<markers.length; i++) { 
    if (!markers[i].setMap()) { 
    html += '<p>' + markers[i].title + '<\/p>'; 
    } 
} 
document.getElementById("gridlist").innerHTML = html; 
} 

這是怎麼我的標記信息：

downloadUrl('isxml.php', function (data) { 
    var xml = data.responseXML; 
    var places = xml.documentElement.getElementsByTagName('marker'); 

    for (var i = 0; i < places.length; i++) { 
    var markerData = { 
     id: places[i].getAttribute('ReportID'), 
     property_type: places[i].getAttribute('proptypedbname'), 
     general_market_area: places[i].getAttribute('genmarkdbname'), 
     gross_land_area: parseFloat(places[i].getAttribute('grosslandSF')), 
     sale_date_formatted: places[i].getAttribute('recorddate') 

    }; 

    markerData.sale_date = new Date(markerData.sale_date_formatted).getTime()/1000; 

    var markerIcon = customIcons[markerData.property_type] || {}; 

    var marker = new google.maps.Marker({ 
     map: map, 
     position: new google.maps.LatLng(
      parseFloat(places[i].getAttribute('lat')), 
      parseFloat(places[i].getAttribute('lng')) 
    ), 
     title: places[i].getAttribute('propertyname'), 
     icon: markerIcon.icon, 
     data: markerData 
    }); 


    // Push the marker to our array of markers. 
    markers.push(marker); 

    } 

}); 

我的過濾系統：

var $filters = $('[data-filter-key]'), 
    filterObj = { 
    checkbox: {}, 
    range: { 
     sale_date: { 
     from: null, 
     to: null 
     }, 
     gross_land_area: { 
     from: null, 
     to: null 
     } 
    } 
    }; 

$filters.on('change', function() { 
var $this = $(this), 
    filterKey = $this.data('filter-key'), 
    filterValue = $this.data('filter-value'); 

filterObj.checkbox[filterKey] = filterObj.checkbox[filterKey] || {}; 

if ($this.is(':checked')) { 
    delete filterObj.checkbox[filterKey][filterValue]; 
} else { 
    filterObj.checkbox[filterKey][filterValue] = true; 
} 

filterMarkers(); 
}); 

var $saledateFrom = $('#saledate_from'), 
    $saledateTo = $('#saledate_to'); 

$saledateFrom.datepicker({ 
dateFormat: 'yy-mm-dd', 
changeYear: true 
}).on('input change', function() { 
var date = new Date($(this).val()).getTime()/1000; 

$saledateTo.datepicker('option', 'minDate', date); 
filterObj.range.sale_date.from = date || null; 

filterMarkers(); 
}); 

$saledateTo.datepicker({ 
dateFormat: 'yy-mm-dd', 
changeYear: true 
}).on('input change', function() { 
var date = new Date($(this).val()).getTime()/1000; 

$saledateFrom.datepicker('option', 'maxDate', date); 
filterObj.range.sale_date.to = date || null; 

filterMarkers(); 
}); 


$('#gross_land_area_from').on('input', function() { 
filterObj.range.gross_land_area.from = parseFloat($(this).val()) || null; 
filterMarkers(); 
}); 

$('#gross_land_area_to').on('input', function() { 
filterObj.range.gross_land_area.to = parseFloat($(this).val()) || null; 
filterMarkers(); 
}); 

function filterMarkers() { 
for (var i = 0; i < markers.length; i++) { 
    var marker = markers[i], 
     filterMatch = false; 

    // Check checkbox filters 
    for (var key in filterObj.checkbox) { 
    if (!filterMatch && filterObj.checkbox.hasOwnProperty(key)) { 
     if (marker.data[key] && filterObj.checkbox[key].hasOwnProperty(marker.data[key])) { 
     filterMatch = true; 
     } 
    } 
    } 

    // Check range filters 
    for (var key in filterObj.range) { 
    if (!filterMatch && filterObj.range.hasOwnProperty(key)) { 
     var range = filterObj.range[key]; 

     if (marker.data[key] !== undefined && range.from && range.to) { 
     var val = marker.data[key]; 

     filterMatch = !val || !(val >= range.from && val <= range.to); 
     } 

    } 
    } 

    // Toggle marker visibility 
    if (marker.map === null && marker.getVisible()) { 
    marker.setMap(map); 
    delete marker.filtered; 
     } else if (filterMatch) { 
    marker.setMap(null); 
    marker.filtered = true; 
     } 

} 
    makeSidebar(); 
} 

我抓傷我的頭在這一段時間，現在只是失去了。第二，第三或第四組眼睛可以真正幫助我。

Answer 1

我想出了速度問題，並認爲我有過濾下來。代碼的放置意味着所有的東西，以及代碼的一些調整。