多个过滤器谷歌地图

Question

我有两个过滤器在我的地图上的某个值范围之间进行检查，当它们不在该范围之间时，将标记变为不可见。它们都可以单独工作但不能组合在一起，当 filter1 被激活时，它会将标记变为可见，这些标记例如由 filter2 设置为不可见。我试图通过使用 getVisible() 检查标记是否可见来阻止这种情况，这样它就不会再次打开不可见的标记，但这会阻止我进入更高的价格范围。

任何帮助将不胜感激，我在下面包含了一个 JSFiddle。

http://jsfiddle.net/jaj1b018/5/

function priceRange() {
  var price1 = parseInt(document.getElementById("price1").value.replace(/\./g, ''), 10);
  var price2 = parseInt(document.getElementById("price2").value.replace(/\./g, ''), 10);
  infoWindow.close();

  for (i = 0; i < markers.length; i++) {
    mark = markers[i];
    if (parseInt(mark.prijs.replace(/\./g, ''), 10) > price1 && parseInt(mark.prijs.replace(/\./g, ''), 10) < price2 && mark.getVisible() == true) {
      mark.setVisible(true);
    } else {
      mark.setVisible(false);
    }
  }
}

Answer 1

只需在同一个按钮事件处理程序（例如oppervlakteRange）中结合检查两个过滤器：

function oppervlakteRange(){
    var WoonOpp1 = document.getElementById("WoonOpp1").value;
    var WoonOpp2 = document.getElementById("WoonOpp2").value;
    var price1 = parseInt(document.getElementById("priceR1").value.replace(/\./g, ''), 10);
    var price2 = parseInt(document.getElementById("priceR2").value.replace(/\./g, ''), 10);

    for(i=0;i<markers1.length;i++){
        mark = gmarkers1[i];

        if(parseInt(mark.woonop.replace(/\m2/g, ''), 10) > WoonOpp1 && 
           parseInt(mark.woonop.replace(/\m2/g, ''), 10) < WoonOpp2 &&
           parseInt(mark.price.replace(/\./g, ''), 10) > price1 && 
           parseInt(mark.price.replace(/\./g, ''), 10) < price2){
            mark.setVisible(true);
        }
        else{
            mark.setVisible(false);     
        }
    }
}

对于两个上限值过滤器，请确保默认情况下可能的最高值为selected：

<select id="priceR2">
    <option value="200.000">200.000</option>
    <option value="300.000">300.000</option>
    <option value="400.000" selected>400.000</option>
</select>

<select id="WoonOpp2" class="controls">
    <option value="50">50 m2</option>
    <option value="100">100 m2</option>
    <option value="150">150 m2</option>
    <option value="200" selected>200 m2</option>
</select>

删除priceRange 方法，因为您不再需要它了。

演示小提琴：http://jsfiddle.net/jaj1b018/6/

Answer 2

您需要将两个检查合并到一个函数中：

function filterMarkers() {
    var WoonOpp1 = document.getElementById("WoonOpp1").value;
    var WoonOpp2 = document.getElementById("WoonOpp2").value;
    var price1 = parseInt(document.getElementById("priceR1").value.replace(/\./g, ''), 10);
    var price2 = parseInt(document.getElementById("priceR2").value.replace(/\./g, ''), 10);

    for (i = 0; i < markers1.length; i++) {
        mark = gmarkers1[i];

        if ((parseInt(mark.woonop.replace(/\m2/g, ''), 10) > WoonOpp1 && parseInt(mark.woonop.replace(/\m2/g, ''), 10) < WoonOpp2) && (parseInt(mark.price.replace(/\./g, ''), 10) > price1 && parseInt(mark.price.replace(/\./g, ''), 10) < price2)) {
            mark.setVisible(true);
        } else {
            mark.setVisible(false);
        }
    }
}

updated fiddle

代码 sn-p：

var gmarkers1 = [];
var markers1 = [];

window.onload = function() {

  var infowindow = new google.maps.InfoWindow({
    content: ''
  });

  // Our markers
  markers1 = [
    ['0', '100.000', 52.4357808, 4.991315699999973, '50m2'],
    ['1', '150.000', 52.4357808, 4.981315699999973, '75m2'],
    ['2', '200.000', 52.4555687, 5.039231599999994, '100m2'],
    ['3', '250.000', 52.4555687, 5.029231599999994, '125m2'],
    ['4', '300.000', 52.4335687, 5.029231599999994, '150m2']
  ];

  /**
   * Function to init map
   */

  function initialize() {
    var center = new google.maps.LatLng(52.4357808, 4.991315699999973);
    var mapOptions = {
      zoom: 12,
      center: center,
      mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    for (i = 0; i < markers1.length; i++) {
      addMarker(markers1[i]);
    }
  }

  /**
   * Function to add marker to map
   */

  function addMarker(marker) {
    var price = marker[1];
    var pos = new google.maps.LatLng(marker[2], marker[3]);
    var content = marker[1] + "</br>" + marker[4];
    var woonop = marker[4];

    marker1 = new google.maps.Marker({
      price: price,
      position: pos,
      woonop: woonop,
      map: map
    });

    gmarkers1.push(marker1);

    // Marker click listener
    google.maps.event.addListener(marker1, 'click', (function(marker1, content) {
      return function() {
        console.log('Gmarker 1 gets pushed');
        infowindow.setContent(content);
        infowindow.open(map, marker1);
      };
    })(marker1, content));
  }

  // Init map
  initialize();

};

function filterMarkers() {
  var WoonOpp1 = document.getElementById("WoonOpp1").value;
  var WoonOpp2 = document.getElementById("WoonOpp2").value;
  var price1 = parseInt(document.getElementById("priceR1").value.replace(/\./g, ''), 10);
  var price2 = parseInt(document.getElementById("priceR2").value.replace(/\./g, ''), 10);

  for (i = 0; i < markers1.length; i++) {
    mark = gmarkers1[i];

    if ((parseInt(mark.woonop.replace(/\m2/g, ''), 10) > WoonOpp1 && parseInt(mark.woonop.replace(/\m2/g, ''), 10) < WoonOpp2) && (parseInt(mark.price.replace(/\./g, ''), 10) > price1 && parseInt(mark.price.replace(/\./g, ''), 10) < price2)) {
      mark.setVisible(true);
    } else {
      mark.setVisible(false);

    }
  }

}

html,
body,
#map-canvas {
  width: 100%;
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
<select id="priceR1">
  <option value="100.000">100.000</option>
  <option value="200.000">200.000</option>
  <option value="300.000">300.000</option>
  <option value="400.000">400.000</option>
</select>
<select id="priceR2">
  <option value="200.000">200.000</option>
  <option value="300.000">300.000</option>
  <option value="400.000">400.000</option>
</select>
<input type="button" onclick="filterMarkers()" value="button" />
</br>
<select id="WoonOpp1" class="controls">
  <option value="50">50 m2</option>
  <option value="100">100 m2</option>
  <option value="200">200 m2</option>
  <option value="250">250 m2</option>
</select>
<select id="WoonOpp2" class="controls">
  <option value="50">50 m2</option>
  <option value="100">100 m2</option>
  <option value="150">150 m2</option>
  <option value="200">200 m2</option>
</select>
<input type="button" onclick="filterMarkers()" value="Klik hier" />