为Google Maps InfoWindow添加关闭图标（X）的实现方法咨询

嘿，我完全懂你的困扰！你用Google Maps的AdvancedMarker示例时，现在InfoWindow点任意地方都能关闭，内容多的时候用户确实容易搞不清——到底是点到了内容操作区还是关闭区，想要个清晰的X关闭图标来明确操作对吧？我来给你分享几个实用的实现方法：

• 自定义InfoWindow的HTML结构，嵌入专属关闭按钮
  首先你可以自己编写InfoWindow的HTML内容，在窗口的右上角（或者你觉得合适的位置）加一个X样式的关闭按钮，比如用<button class="info-close-btn">×</button>。然后给这个按钮加些CSS样式，让它显眼又好用：

  .info-close-btn {
    position: absolute;
    top: 6px;
    right: 10px;
    border: none;
    background: none;
    font-size: 22px;
    cursor: pointer;
    color: #555;
    padding: 0 4px;
  }
  .info-close-btn:hover {
    color: #000;
    font-weight: bold;
  }
  

  之后创建InfoWindow的时候，把这段自定义HTML作为内容传进去就行，替换掉原来的默认内容。

• 给关闭按钮绑定专属的关闭事件
  因为InfoWindow的内容是动态渲染到页面上的，所以我们要等它加载完成后再绑定点击事件。可以借助InfoWindow的domready事件来做：

  // 创建带自定义内容的InfoWindow
  const customInfoWindow = new google.maps.InfoWindow({
    content: `
      <div class="info-window-wrapper">
        <button class="info-close-btn">×</button>
        <div class="info-content">
          <!-- 这里放你的InfoWindow实际内容 -->
          <p>这是我的自定义InfoWindow内容</p>
        </div>
      </div>
    `
  });
  
  // 等InfoWindow渲染完成后绑定关闭事件
  customInfoWindow.addListener('domready', () => {
    const closeBtn = document.querySelector('.info-close-btn');
    if (closeBtn) {
      closeBtn.addEventListener('click', () => {
        customInfoWindow.close();
      });
    }
  });
  

  如果你想取消原来“点击InfoWindow任意区域关闭”的行为，只保留X按钮关闭，那记得把原来示例中绑定的InfoWindow点击关闭事件删掉就好；要是想同时保留两种关闭方式，那就不用动原来的逻辑。

• 和AdvancedMarker配合的小细节
  当你给AdvancedMarker绑定点击打开InfoWindow的事件时，要是每次打开都重新创建内容，记得避免重复绑定关闭事件哦。可以把内容创建和事件绑定的逻辑封装成一个函数，每次打开窗口时调用，或者确保按钮事件是一次性绑定的。

这样设置后，用户就能清晰地看到专门的关闭图标，不会再和窗口内的其他可点击内容混淆啦！

备注：内容来源于stack exchange，提问作者user460114