基于uni-app的微信小程序Map事件穿透处理

基于uni-app的微信小程序Map事件穿透处理

背景

业务需要在微信小程序中使用地图组件，上面需要有点位及点位的交互，同时地图上也会有一些悬浮的按钮、弹窗之类的。在微信小程序2.8.x的版本之后,地图这种原生组件是支持同层渲染的，也就是可以通过样式控制层级。在开发者工具中表现正常，但是上了真机后会发现点击事件会穿透（其实主要是marker的事件）。于是在微信社区找解决方案，结果又回到了用cover-image和cover-view的方式。这样又无法满足一些弹层（比如弹层中需要评论功能，需要使用input）的场景。

问题描述

demo

<template><view class="map_page_container"><mapclass="map"@tap="handleClickMap"@markertap="handleClickMarker"latitude="30.654228"longitude="104.066558":markers="markersList"></map><!-- 测试弹层穿透情况 --><div class="float_container" @tap="handleClickPrevent"><!-- input用于测试focus时的情况 --><input /><!-- 按钮用于测试点击穿透情况--><button @tap="handleClickButton">测试按钮</button></div></view>
</template>
<script> export default {data() {return {markersList: [{id: '1',latitude: '30.654228',longitude: '104.066558',iconPath: '/static/images/ge/guide.png',},],};},methods: {handleClickMap() {console.log('click map');},handleClickButton()