Google Maps标记需点击两次才响应，点击时标记闪消失问题求助

看起来你遇到的两个问题根源应该是标记实例的引用管理不当——要么是初始添加标记时没把实例存进markersArray，要么是点击事件里不小心触发了标记的重新渲染逻辑，咱们一步步来解决：

1. 先解决clearMarkers()无效的问题（核心根源） #

从描述看，没点击过标记时调用这个函数没效果，说明你的markersArray在初始加载标记的时候根本没把所有标记实例存进去！大概率你是在标记的点击事件里才往数组里加实例，那没被点击过的标记自然不在数组里，函数找不到要移除的对象。

修复步骤：
在你创建并添加标记到地图的代码里，每生成一个google.maps.Marker实例，立刻把它push到markersArray里，比如：

// 假设你是遍历C/D数组来添加标记，改成这样：
function loadMarkers() {
  // 先清空旧标记（如果需要）
  clearMarkers();
  // 根据cat筛选数据
  const data = cat.includes('All') ? [...C, ...D] : (cat === 'restaurants' ? C : D);
  data.forEach(item => {
    const marker = new google.maps.Marker({
      position: new google.maps.LatLng(item.lat, item.lng),
      map: map
    });
    // 关键：创建后立刻存进数组！
    markersArray.push(marker);
    
    // 绑定点击事件（别在这里重新加载标记！）
    marker.addListener('click', function() {
      // 这里只处理InfoBox的显示逻辑，比如：
      const infoBox = new google.maps.InfoWindow({
        content: `<div>${item.name}</div>`
      });
      infoBox.open(map, this);
    });
  });
}

然后确保你的clearMarkers()函数逻辑正确：

function clearMarkers() {
  // 遍历数组，把每个标记从地图上移除
  for (const marker of markersArray) {
    marker.setMap(null);
  }
  // 清空数组，避免下次操作有残留
  markersArray = [];
}

2. 解决点击标记时所有标记短暂消失的问题 #

这个问题几乎肯定是因为你在标记的click事件处理函数里，不小心调用了重新加载所有标记的代码（比如再次调用loadMarkers()或者类似逻辑），导致旧标记被移除、新标记立刻加上，视觉上就像所有标记消失后重现。

检查与修复：

• 打开标记的click事件监听代码，看看里面有没有触发标记重新渲染的逻辑，比如重新遍历C/D数组创建标记的代码，把这部分删掉；
• 检查有没有重复绑定事件的情况——如果多次调用loadMarkers()而没先清空旧标记，会导致同一位置叠加多个标记，点击时触发多次事件，也可能出现类似闪烁问题；
• 最后，确认InfoBox的初始化没有触发地图重绘（一般InfoWindow/InfoBox不会，但如果你的配置里有特殊属性，也可以排查下）。

验证方法 #

1. 先调用loadMarkers()加载标记，然后直接调用clearMarkers()，看所有标记是否能正常消失；
2. 点击某个标记，观察是否只有该标记的InfoBox弹出，没有其他标记闪烁消失的情况。

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