谷歌地圖api過濾器複選框

Question

我正在嘗試使谷歌地圖過濾。一個過濾器是選擇框（現在它正在工作），其他過濾器是複選框。所以現在我的行​​爲就像一個單選按鈕。你可以在這裏舉例http://extrol.ellectadigital.com/distributeri/。
當你檢查它，它顯示良好的引腳，但是當你點擊第二個它刪除第一個引腳，我不想要。 因此，這裏是我的代碼：

`http://codepen.io/PoznanM/pen/VpoZOm` 

Answer 1

問題是在這裏onclick="filterChecker(this.value);"在filterChecker功能只有一個檢查項目進行了比較和其他標誌物被清除。

所以你必須比較所有的檢查項目。我添加功能selectAllChecked()它通過檢查值作爲陣列的功能filterChecker()

var gmarkers1 = []; 
 
var markers1 = []; 
 
var infowindow = new google.maps.InfoWindow({ 
 
    content: '' 
 
}); 
 
var filters = { 
 
    shower: false, 
 
    vault: false, 
 
    flush: false 
 
} 
 

 
// Our markers 
 
markers1 = [ 
 
    ['0', 'Title', 44.741318, 20.433573, 'Beograd', 'distributer'], 
 
    ['1', 'Title', 45.823783, 16.024404, 'Zagreb', 'servis'], 
 
    ['2', 'Title', 44.438350, 17.631215, 'Bosna', 'maloprodaja'] 
 
]; 
 

 
/** 
 
* Function to init map 
 
*/ 
 

 
function initialize() { 
 
    var center = new google.maps.LatLng(45.662477, 18.022074); 
 
    var mapOptions = { 
 
    zoom: 5, 
 
    center: new google.maps.LatLng(45.662477, 18.022074), 
 
    mapTypeId: 'roadmap', 
 
    }; 
 

 
    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 tip = marker[5]; 
 
    var category = marker[4]; 
 
    var title = marker[1]; 
 
    var pos = new google.maps.LatLng(marker[2], marker[3]); 
 
    var content = marker[1]; 
 

 
    marker1 = new google.maps.Marker({ 
 
    title: title, 
 
    position: pos, 
 
    tip: tip, 
 
    category: category, 
 
    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); 
 
     map.panTo(this.getPosition()); 
 
     map.setZoom(15); 
 
    } 
 
    })(marker1, content)); 
 
} 
 

 
/** 
 
* Function to filter markers by category 
 
*/ 
 

 
filterMarkers = function(category) { 
 
    for (i = 0; i < markers1.length; i++) { 
 
    marker = gmarkers1[i]; 
 
    // If is same category or category not picked 
 
    if (marker.category == category || category.length === 0) { 
 
     marker.setVisible(true); 
 
    } 
 
    // Categories don't match 
 
    else { 
 
     marker.setVisible(false); 
 
    } 
 
    } 
 

 
} 
 
var get_set_options = function() { 
 
    ret_array = [] 
 
    for (option in filters) { 
 
    if (filters[option]) { 
 
     ret_array.push(option) 
 
    } 
 
    } 
 
    return ret_array; 
 
} 
 

 
var filter_markers = function() { 
 
    set_filters = get_set_options() 
 

 
    // for each marker, check to see if all required options are set 
 
    for (i = 0; i < markers.length; i++) { 
 
    marker = markers[i]; 
 

 
    // start the filter check assuming the marker will be displayed 
 
    // if any of the required features are missing, set 'keep' to false 
 
    // to discard this marker 
 
    keep = true 
 
    for (opt = 0; opt < set_filters.length; opt++) { 
 
     if (!marker.properties[set_filters[opt]]) { 
 
     keep = false; 
 
     } 
 
    } 
 
    marker.setVisible(keep) 
 
    } 
 
} 
 

 

 
// Fuction for checkboxes 
 
var tipovi = document.getElementsByClassName('chk-btn').value; 
 

 
var selectAllChecked = function() { 
 
    var checkedPlace = [] 
 
    var allCheckedElem = document.getElementsByName('filter'); 
 
    for (var i = 0; i < allCheckedElem.length; i++) { 
 
    if (allCheckedElem[i].checked == true) { 
 
     checkedPlace.push(allCheckedElem[i].value)//creating array of checked items 
 
    } 
 
    } 
 
    filterChecker(checkedPlace) //passing to function for updating markers 
 
} 
 

 
var filterChecker = function(tip) { 
 
    //console.log(tip); 
 
    for (i = 0; i < markers1.length; i++) { 
 
    marker = gmarkers1[i]; 
 
    //console.log(marker); 
 
    if (in_array(this.marker.tip, tip) != -1) { 
 
     marker.setVisible(true); 
 
    } else { 
 
     marker.setVisible(false); 
 
    } 
 
    } 
 
} 
 
// Init map 
 
initialize(); 
 

 
function in_array(needle, haystack) { 
 
    var found = 0; 
 
    for (var i = 0, len = haystack.length; i < len; i++) { 
 
    if (haystack[i] == needle) return i; 
 
    found++; 
 
    } 
 
    return -1; 
 
}

#map-canvas { 
 
    height: 300px; 
 
} 
 

 
#iw_container .iw_title { 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
} 
 

 
.iw_content { 
 
    padding: 15px 15px 15px 0; 
 
}

<div id="map-canvas"> 
 

 
</div> 
 

 
<select id="type" onchange="filterMarkers(this.value);"> 
 
    <option value="">Izaberite Mesto</option> 
 
    <option value="Beograd">Beograd</option> 
 
    <option value="Zagreb">Zagreb</option> 
 
    <option value="Bosna">Bosna</option> 
 
</select> 
 
<div id="buttons"> 
 

 
    <input type="checkbox" name="filter" value="distributer" class='chk-btn' onclick="selectAllChecked();"> 
 
    <label for='shower'>Distributer</label> 
 

 
    <input type="checkbox" name="filter" value="maloprodaja" class='chk-btn' onclick="selectAllChecked();"> 
 
    <label for='flush'>Maloprodaja</label> 
 

 
    <input type="checkbox" name="filter" value="servis" class='chk-btn' onclick="selectAllChecked();"> 
 
    <label for='vault'>Servis</label> 
 

 
</div> 
 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCmUfKutqGZ-VgbD4fwjOFd1EGxLXbxcpQ&sCensor=false"></script>