基于uni-app的微信小程序Map事件穿透处理
背景
业务需要在微信小程序中使用地图组件,上面需要有点位及点位的交互,同时地图上也会有一些悬浮的按钮、弹窗之类的。在微信小程序2.8.x的版本之后,地图这种原生组件是支持同层渲染的,也就是可以通过样式控制层级。在开发者工具中表现正常,但是上了真机后会发现点击事件会穿透(其实主要是marker的事件)。于是在微信社区找解决方案,结果又回到了用cover-image和cover-view的方式。这样又无法满足一些弹层(比如弹层中需要评论功能,需要使用input)的场景。文章来源地址https://www.toymoban.com/news/detail-500172.html
问题描述
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() {console.log('click button');},handleClickMarker(event) {console.log('click ma
文章来源:https://www.toymoban.com/news/detail-500172.html
到了这里,关于基于uni-app的微信小程序Map事件穿透处理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!