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

我想出速度问题，并认为我已经过滤了。代码的放置意味着一切，那些和代码的一些调整。

边栏与谷歌地图标记上的过滤器

1 个答案: