多個過濾器谷歌地圖

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方法，因爲你不需要它了。

Demo小提琴：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

代碼片段：

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" />