Google Maps全选/取消选按钮无法控制标记显示隐藏问题求助

我帮你梳理了代码里的几个关键问题，调整后就能解决全选/取消选不同步标记状态和初始隐藏标记失效的问题了：

核心问题分析 #

• 复选框事件未绑定生效：你写了$(".checkbox").change()事件处理逻辑，但所有复选框都没有添加class="checkbox"，导致这个事件根本没触发，所以修改复选框状态后不会同步控制标记显示/隐藏。
• 初始隐藏标记的变量错误：你用了markers.forEach(...)，但代码里根本没有定义markers变量——存储标记的是gmarkers数组，所以遍历对象错误。
• 冗余的未定义函数：复选框的onclick="boxclick(...)"调用了未定义的boxclick函数，逻辑冲突且无意义。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script type="text/javascript"> 
var gmarkers = []; 
var map = null; 
var ib = new InfoBox(); 

// 全选：勾选所有复选框并同步显示所有标记
function check() {
  $('input[type="checkbox"].checkbox').prop("checked", true).change();
} 
// 取消选：取消所有复选框并同步隐藏所有标记
function uncheck() {
  $('input[type="checkbox"].checkbox').prop("checked", false).change();
} 

// 创建标记并绑定事件
function createMarker(latlng,name,html,category) {
  var boxText = document.createElement("div");
  boxText.style.cssText = "margin-top: 10px; background: rgba(255,255,255,0.7); padding: 10px; border-radius: 10px; color: #000";
  boxText.innerHTML = html;

  var myOptions = {
    content: boxText,
    disableAutoPan: false,
    maxWidth: 0,
    pixelOffset: new google.maps.Size(-100, 0),
    zIndex: null,
    boxStyle: {
      background: "url('tip.png') no-repeat",
      width: "250px",
    },
    closeBoxURL: "",
    infoBoxClearance: new google.maps.Size(1, 1),
    isHidden: false,
    pane: "floatPane",
    enableEventPropagation: false
  };

  var marker = new google.maps.Marker({
    position: latlng,
    icon: category + ".png",
    map: map,
    title: name,
    zIndex: Math.round(latlng.lat()*-100000)<<5,
    visible: false // 可选：直接设置初始隐藏，和后续forEach逻辑二选一即可
  });

  // 存储分类信息到标记属性
  marker.mycategory = category;
  marker.myname = name;
  gmarkers.push(marker);

  google.maps.event.addListener(marker, 'click', function() {
    ib.setOptions(myOptions)
    ib.open(map, this);
  });
  return marker;
} 

// 显示指定分类的所有标记
function show(category) {
  for (var i=0; i<gmarkers.length; i++) {
    if (gmarkers[i].mycategory == category) {
      gmarkers[i].setVisible(true);
    }
  }
  document.getElementById(category+"box").checked = true;
} 

// 隐藏指定分类的所有标记
function hide(category) {
  for (var i=0; i<gmarkers.length; i++) {
    if (gmarkers[i].mycategory == category) {
      gmarkers[i].setVisible(false);
    }
  }
  document.getElementById(category+"box").checked = false;
  ib.close();
} 

// 复选框状态改变时同步标记
$(".checkbox").change(function() {
  var category = $(this).attr("value");
  if ($(this).is(":checked")) {
    show(category);
  } else {
    hide(category);
  }
})

function myclick(i) {
  google.maps.event.trigger(gmarkers[i],"click");
} 

function initialize() {
  var myOptions = {
    zoom: 14,
    center: new google.maps.LatLng(43.65623,-79.38518),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetViewControl: false
  }
  map = new google.maps.Map(document.getElementById("map"), myOptions);

  google.maps.event.addListener(map, 'click', function() {
    ib.close();
  });

  $(document).ready(function(){
    $.getJSON('data.json', function(data) {
      for (var i = 0; i < data.length; i++) {
        var item = data[i];
        var point = new google.maps.LatLng(item.ltt, item.lgt);
        var name = item.name;
        var html = "<b>"+item.name+"<\/b><br \/>"+item.place+"<br \/><a href='"+ item.url +"' title='"+ item.name +"'>View details<\/a>";
        var category = item.cat;
        createMarker(point,name,html,category);
      }

      // 初始隐藏所有标记，并取消所有复选框选中状态
      gmarkers.forEach((marker) => marker.setVisible(false));
      $('input[type="checkbox"].checkbox').prop("checked", false);
    });
  });
}
</script>
</head>
<body onload="initialize()">
  <div class="checkbuttons">
    <input type="button" value="Check All" class="button" onclick="check();">
    <input type="button" value="Uncheck All" class="button" onclick="uncheck();">
  </div>
  <form action="#">
    <div class="map-check">
      <img src="eat.png" title="Eat" />
      <div><input type="checkbox" id="eatbox" value="eat" class="checkbox" /> Places to Eat</div>
    </div>
    <div class="map-check">
      <img src="stay.png" title="Stay" />
      <div><input type="checkbox" value="stay" id="staybox" class="checkbox" /> Places to Stay</div>
    </div>
  </form>
  <div id="map" style="width: 750px; height: 600px"></div>
</body>
</html>

关键修改点说明 #

1. 给复选框添加class="checkbox"：让jQuery的$(".checkbox").change()事件能正确选中并处理这些复选框，实现状态改变时同步标记显示/隐藏。
2. 修正初始隐藏的遍历对象：把markers.forEach改成gmarkers.forEach，对应代码中存储标记的数组。
3. 移除未定义的boxclick函数调用：删掉复选框上的onclick="boxclick(...)"，统一用jQuery的change事件处理逻辑。
4. 可选优化：在创建Marker时直接设置visible: false，也能实现初始隐藏，和后续的forEach逻辑二选一即可。
5. 全选/取消选函数优化：明确指定选中.checkbox类的复选框，避免影响页面其他复选框。

内容的提问来源于stack exchange，提问作者Amateurbynature