uni-app IOS15 支付宝小程序 地图组件上有遮挡物时 无法操作地图

uni-app IOS15 支付宝小程序 地图组件上有遮挡物时 无法操作地图

操作步骤：

场景一： 地图上层用定位放了三个控件， 地图无法拖拽无法缩放。 去掉这个三个控件，就可以操作。

场景二： 地图上不显示控件，判断到某一区域后才去显示这三个控件， 地图到达区域前可以操作，地图到达区域后显示了三个控件，地图不可操作。

预期结果：

地图可以操作

实际结果：

有遮挡物时，地图不能操作

bug描述：

支付宝小程序地图上有遮挡物时，无法操作地图。 安卓及ios15以下手机正常。

image


更多关于uni-app IOS15 支付宝小程序 地图组件上有遮挡物时 无法操作地图的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

【解决方法】使用小程序基础库2.0构建就可以了

更多关于uni-app IOS15 支付宝小程序 地图组件上有遮挡物时 无法操作地图的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我勾选了2.0库 还是不行啊

在 iOS 15 的支付宝小程序环境中，地图组件（map）与上层覆盖的控件（如 view）确实可能出现事件穿透问题，导致地图无法响应拖拽和缩放操作。这通常是由于 iOS 15 的 WebKit 引擎对事件处理机制的调整，影响了小程序的渲染层与原生地图之间的交互。

问题原因：
在 iOS 15 中，当 map 组件上方存在其他控件（即使控件是透明的或仅用于布局）时，这些控件可能会“拦截”触摸事件，阻止事件传递到底层的地图组件。这与安卓或旧版 iOS 不同，后者通常允许事件穿透到地图。

解决方案：

  1. 调整控件样式：
    为覆盖在地图上的控件添加 CSS 属性 pointer-events: none。这允许触摸事件直接穿透控件，到达地图组件。例如：

    .overlay {
  pointer-events: none;
}

    如果控件需要交互（如按钮），可在子元素上单独设置 pointer-events: auto。

  2. 动态控制事件穿透：
    在场景二中，当需要显示控件时，可通过动态类或样式绑定，在显示控件的同时启用 pointer-events: none。例如：

    <view :class="{'overlay': isInRegion}" [@tap](/user/tap)="handleControl">
  <!-- 控件内容 -->
</view>
回到顶部