微信小程序原生地图被弹窗点不到？同层渲染的触摸事件黑洞

页面用 <map> 做背景，弹出一个底部弹窗。样子看起来完全正常，弹窗盖在地图上面，但就是点不到——弹窗里的按钮没反应，scroll-view 滑不动，手指轻轻往地图方向歪一点居然触发了地图标注的点击事件。这是很多人第一次在微信小程序里用原生组件叠加弹窗时都会撞上的坑。

现象

• 弹窗打开后，内部的 scroll-view 无法滚动，手势被吞掉。
• 弹窗里的按钮需要连点两次，或者根本没反应。
• 弹窗边缘附近的点击意外触发了地图底层的 markertap / callouttap 事件，再弹出第二个弹窗。
• 关闭弹窗后地图中心、缩放级别全部复位，自绘的标注图标需要重新渲染。

同样的症状在 <canvas>、<textarea>、<video>、<live-player> 上都会出现。

根因

微信使用同层渲染（same-layer rendering）将原生组件"嵌入"到 WebView 里。视觉上原生内容和 WebView 内容在同一层，但触摸事件的路由走的是 OS 侧的 hit-test，原生视图永远先拿到事件：

┌─────────────────────────────────────┐
│  WebView 层（DOM、弹窗、CSS）        │  ← z-index 只在这层内部生效
├─────────────────────────────────────┤
│  原生层（map、canvas、video）        │  ← OS 级视图，hit-test 优先
└─────────────────────────────────────┘

关键在于：hidden 属性会在 OS 侧卸载原生视图，让它彻底退出 hit-test，同时 JS 实例和内部状态完整保留；而 wx:if 是销毁重建，状态必然丢失。

正解

三件事组合：

1. 用 hidden 而非 wx:if 控制弹窗期间的原生组件可见性，这样状态不丢。
2. 将弹窗打开标志位直接绑到 hidden，弹窗一开，原生视图立刻退出 hit-test。
3. 在事件处理器里加状态守卫，防御弹窗打开瞬间已在飞行中的那次点击。

WXML 写法

<map
  wx:if="{{viewMode === 'map'}}"
  hidden="{{showDetailPopup || showCityPicker}}"
  class="map-container"
  latitude="{{latitude}}"
  longitude="{{longitude}}"
  scale="{{mapScale}}"
  markers="{{markerList}}"
  bindmarkertap="onMarkerTap"
  bindcallouttap="onCallouttap">
</map>
 
<van-popup
  show="{{showDetailPopup}}"
  position="bottom"
  round
  closeable
  bind:close="onClosePopup"
  custom-style="height:75%;">
  <!-- scroll-view、按钮等均正常响应 -->
</van-popup>

wx:if 保留用于"地图/列表"视图切换（这里重置状态是预期行为），hidden 专门处理弹窗叠加场景。

JS 状态守卫

onMarkerTap(e) {
  // 守卫：弹窗打开动画期间飞来的点击一律丢弃
  if (this.data.showDetailPopup || this.data.showCityPicker) return;
  const storeId = this._markerIdToStore[e.detail.markerId]?.storeId;
  if (!storeId) return;
  this._openDetailPopup(storeId);
},
 
onCallouttap(e) {
  if (this.data.showDetailPopup || this.data.showCityPicker) return;
  this.onMarkerTap(e);
},

守卫覆盖的是 hidden 生效前约 16ms 的窗口期（原生视图从 OS 侧卸载的延迟）。

一句话外卖

微信小程序原生组件叠加弹窗，靠 hidden 退出 hit-test，靠事件守卫补窗口期，wx:if 和 z-index 都是死路。