APP-IOS端使用uni-app map组件，手指在customCallout上时无法拖动地图

APP-IOS端使用uni-app map组件，手指在customCallout上时无法拖动地图

开发环境 版本号 项目创建方式
Mac 10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：10

HBuilderX类型：正式

HBuilderX版本号：4.66

手机系统：iOS

手机系统版本号：iOS 18

手机厂商：苹果

手机机型：iphone13

页面类型：nvue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：

```html
<map class="map" id="myMap" ref="myMap" :style="[{  width: screenWidth + 'px',height:screenHeigth+'px' }]"  
latitude="latitude" :longitude="longitude" :markers="markers" :scale="scale" [@regionchange](/user/regionchange)="mapChange"
        @markertap="markertap" @callouttap="callouttap" style="position: relative;" :min-scale="3" layer-style="5ffda07b6d2124b344ba0b71e2c414d2">
    <cover-view slot="callout">
        <cover-view v-for="(item,index) in markers" :key="item.id" :marker-id="item.id" class="custom-callout"  
style="getCalloutStyle(item)">
<!--你的内容-->
<cover-view class="bubbleAll1" v-if="item.scaleCenter>12">
    <cover-view class="bubble1">  
        <cover-image src="@/pagesA/static/image/map/finsh.png" v-if="item.status==1"  
            class="logo"></cover-image>  
        <cover-image src="@/pagesA/static/image/map/noFinsh.png" v-if="item.status==0"  
            class="logo"></cover-image>  
        <cover-view class="bubbleContent">  
            <text class="name">{{item.name}} </text>  
            <cover-view>  
                <text class="customNames">{{item.projectNo}} · {{item.customName}} </text>  
            </cover-view>  
        </cover-view>  
    </cover-view>  
    <cover-image src="@/pagesA/static/image/map/whiteBottom.png" class="triangle1"  
        v-if="!item.isClick"></cover-image>  
    <cover-image src="@/pagesA/static/image/map/blueBorderBottom.png" class="triangle2"  
        v-else></cover-image>  
</cover-view>  

<cover-view class="bubbleAll" v-else>  
    <cover-view class="bubble">  
        <text class="labels">{{item.name}}</text>  
        <text class="whiteBlock">·</text>  
        <text class="labels">{{item.total}}</text>  
    </cover-view>  
    <cover-image src="@/pagesA/static/image/map/blueArrowBottm.png" class="triangle"></cover-image>  
</cover-view>  

</cover-view>  
</cover-view>  
</map>

操作步骤：

刚进页面把customCallout里的display 设置 ALWAYS 然后手势在气泡弹框上 地图无法滚动

预期结果：

刚进页面把customCallout里的display 设置 ALWAYS 然后手势在气泡弹框上 需要地图滚动

实际结果：

地图无法滚动

bug描述：

手势在气泡上 地图就没办法滑动 如何解决

更多关于APP-IOS端使用uni-app map组件，手指在customCallout上时无法拖动地图的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于APP-IOS端使用uni-app map组件，手指在customCallout上时无法拖动地图的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的iOS平台上的事件冒泡问题。当customCallout的display设置为ALWAYS时，触摸事件会被cover-view组件捕获，导致地图无法接收到拖动事件。

解决方案是在cover-view上添加@touchstart和@touchmove事件处理器，并在这些事件中调用preventDefault()来阻止事件捕获，同时手动触发地图的拖动：

<cover-view 
    slot="callout"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
>
    <!-- 你的customCallout内容 -->
</cover-view>

在methods中添加：

handleTouchStart(e) {
    e.preventDefault()
    // 获取地图上下文，手动触发拖动
    this.mapContext = uni.createMapContext('myMap', this)
},

handleTouchMove(e) {
    e.preventDefault()
    // 阻止默认行为，允许地图滚动
}

另外，确保cover-view的样式没有设置pointer-events: none，这会阻止事件传递。如果问题仍然存在，可以尝试在cover-view上添加样式：

.custom-callout {
    pointer-events: auto;
}
回到顶部