uni-app开发app时 map组件被cover-view覆盖后 安卓机滑动地图无法滚动页面 ios正常

uni-app开发app时 map组件被cover-view覆盖后 安卓机滑动地图无法滚动页面 ios正常

产品分类

uniapp/App

开发环境、版本号和项目创建方式

项⽬目信息 详细信息
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 13.2.1 (22D68)
HBuilderX类型 正式
HBuilderX版本号 3.7.9
手机系统 Android
手机系统版本号 Android 12
手机厂商 IQOO
手机机型 Neo3
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码

地图组件上覆盖cover-view

<map  
  class="map"  
  :scale="17"  
  :longitude="lng"  
  :latitude="lat"  
  :markers="covers"  
  :enable-zoom="false"  
  :enable-scroll="false"  
>  
  <cover-view class="mask">  
    <cover-view class="navigation-btn">  
      <cover-image class="pic" src="/static/images/common/navigation.png"></cover-image>  
      <cover-view class="text">开始导航</cover-view>  
    </cover-view>  
  </cover-view>  
</map>

相关样式：

.map {  
  position: relative;  
  width: 750rpx;  
  height: 378rpx;  
}  

.mask {  
  position: absolute;  
  top: 0;  
  right: 0;  
  bottom: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
}

操作步骤

算了，官方也不看，无所谓了

预期结果

希望安卓机上，手指滑动在地图上时也能滚动页面

实际结果

实际上安卓机上，手指滑动在地图上不能滚动页面

bug描述

算了，官方也不看，不问了

使用uniapp开发安卓和ios两个平台的app。有一个显示地理位置的需求，需要使用到map组件。因为需要在地图上显示按钮且控制地图不能拖动，所以使用cover-view覆盖在地图上面。至此，ios上没问题，但是安卓机上当手指在地图上滑动时，不能滚动页面，在地图区域之外才能正常手指滑动页面，没有找到解决办法，猜测还是跟地图拖动有关系？app上不能直接禁止地图拖动，所以我用的cover-view全覆盖的方式。

图片


更多关于uni-app开发app时 map组件被cover-view覆盖后 安卓机滑动地图无法滚动页面 ios正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

我也遇到了，官方都不解决问题的吗，太烂了

更多关于uni-app开发app时 map组件被cover-view覆盖后 安卓机滑动地图无法滚动页面 ios正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你好，请问解决了吗？我是vue页面，安卓也是，地图区域无法通过触摸滑动列表

安卓的外面用view做绝对定位跟地图大小一样就行，这样触摸的就不是地图

map组件下面加一个同样大小的view 然后在view上加一个空的移动事件 @touchmove.stop.prevent="" 阻止触摸穿透 就可以了 <view style="position: relative;">
<map style="width: 750rpx; height: 750rpx;"></map>
<view style=“width: 750rpx; height: 750rpx;position: absolute;top:0;left:0;” @touchmove.stop.prevent=""></view>
</view>

在uni-app开发中，遇到map组件被cover-view覆盖后，安卓机滑动地图无法滚动页面而iOS正常的问题，通常是由于cover-view在安卓和iOS平台上的差异导致。cover-view设计初衷是用于覆盖在小程序原生组件（如video、map等）上，但在不同平台实现机制不同，可能会引发一些兼容性问题。

为了解决这个问题，可以尝试以下几种方法，这里我将提供代码示例，展示如何通过调整布局或使用替代方案来绕过这个问题。

方法一：调整布局

如果可能，调整页面布局，避免使用cover-view直接覆盖map组件。可以使用透明度的视图或者其他UI组件来达到类似效果。

<template>
  <view class="container">
    <map :longitude="longitude" :latitude="latitude" style="width: 100%; height: 300px;"></map>
    <view class="overlay" @touchstart="handleTouchStart" @touchmove="handleTouchMove">
      <!-- 覆盖内容 -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      longitude: 116.404,
      latitude: 39.915
    };
  },
  methods: {
    handleTouchStart(e) {},
    handleTouchMove(e) {
      // 可以在这里添加处理逻辑，例如判断滑动方向并相应地移动地图
    }
  }
};
</script>

<style>
.container {
  position: relative;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 可以设置透明度 */
  background-color: rgba(255, 255, 255, 0.5);
}
</style>

方法二：使用条件编译

针对不同平台使用条件编译来分别处理。

<template>
  <view class="container">
    <map :longitude="longitude" :latitude="latitude" style="width: 100%; height: 300px;"></map>
    <view v-if="$mp.system.platform === 'android'" class="android-overlay">
      <!-- 仅安卓显示的覆盖内容 -->
    </view>
    <cover-view v-else class="ios-overlay">
      <!-- 仅iOS显示的覆盖内容 -->
    </cover-view>
  </view>
</template>

<!-- 省略script和style部分，与上一个示例类似 -->

注意事项

  • 确保在开发过程中充分测试不同安卓版本和设备，因为安卓设备的碎片化可能导致问题表现不一致。
  • 如果上述方法仍无法解决，考虑向uni-app社区或官方提交issue，寻求更专业的帮助。

通过上述方法，可以在一定程度上缓解或解决map组件被cover-view覆盖后安卓机滑动地图无法滚动页面的问题。

回到顶部