基于uni-app的微信小程序Map事件穿透處理
背景
業(yè)務(wù)需要在微信小程序中使用地圖組件，上面需要有點位及點位的交互，同時地圖上也會有一些懸浮的按鈕、彈窗之類的。在微信小程序2.8.x的版本之后,地圖這種原生組件是支持同層渲染的，也就是可以通過樣式控制層級。在開發(fā)者工具中表現(xiàn)正常，但是上了真機后會發(fā)現(xiàn)點擊事件會穿透（其實主要是marker的事件）。于是在微信社區(qū)找解決方案，結(jié)果又回到了用cover-image和cover-view的方式。這樣又無法滿足一些彈層（比如彈層中需要評論功能，需要使用input）的場景。文章來源地址http://www.zghlxwxcb.cn/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文章來源：http://www.zghlxwxcb.cn/news/detail-500172.html
到了這里，關(guān)于基于uni-app的微信小程序Map事件穿透處理的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
