iOS端Ionic应用中JS Google Maps InfoWindow无法关闭问题

我之前在Ionic + Google Maps的项目里也踩过这个坑，桌面端一切正常，但iOS上InfoWindow就是关不掉，大概率是触摸事件处理或者Ionic的默认事件拦截在搞鬼，给你几个亲测有效的解决方向：

1. 同时绑定点击和触摸事件 #

iOS的触摸事件机制和桌面端的点击事件有差异，有时候InfoWindow的关闭按钮只绑定click事件会失效，建议同时加上touchend事件：

// 创建InfoWindow
const infoWindow = new google.maps.InfoWindow({
  content: `
    <div class="info-window">
      <h3>地点名称</h3>
      <p>地点描述</p>
      <button id="info-close-btn">关闭</button>
    </div>
  `
});

// 监听InfoWindow的DOM加载完成事件，绑定关闭逻辑
google.maps.event.addListener(infoWindow, 'domready', () => {
  const closeBtn = document.getElementById('info-close-btn');
  if (closeBtn) {
    // 同时绑定click和touchend确保iOS能响应
    closeBtn.addEventListener('click', () => infoWindow.close());
    closeBtn.addEventListener('touchend', () => infoWindow.close());
  }
});

2. 阻止Ionic的触摸干扰 #

Ionic默认会对页面元素做触摸优化（比如tap事件替换原生click），这可能会干扰Google Maps的事件触发。给地图容器添加data-tap-disabled="true"属性，让Ionic跳过对这个区域的触摸处理：

<!-- 你的地图容器元素 -->
<div #mapContainer class="map-container" data-tap-disabled="true"></div>

3. 确保InfoWindow内容可点击 #

有时候CSS的pointer-events或者层级问题会导致关闭按钮无法被点击，给InfoWindow的内容添加样式确保它能接收触摸事件：

.info-window {
  pointer-events: auto !important;
  z-index: 9999 !important;
}

4. 更新Google Maps JS SDK版本 #

旧版本的Google Maps JS API在iOS的WebView里可能存在事件处理的bug，尝试更新到最新的SDK版本，比如在引入脚本时使用v=weekly或者指定最新稳定版：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=weekly"></script>

5. 检查页面层级冲突 #

如果你的地图是在Ionic的模态框、弹出层里，可能遮罩层的层级比InfoWindow高，导致点击被遮罩拦截。可以临时调整InfoWindow的层级，或者在打开InfoWindow时暂时禁用遮罩的触摸事件。

这些方法里，前两个我当时用了就解决了问题，你可以先试试~

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