javascript - Google map 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>