uni-app 为什么cover-view不能全部覆盖map组件

发布于 1周前 作者 itying888 来自 Uni-App

uni-app 为什么cover-view不能全部覆盖map组件

开发环境 版本号 项目创建方式
Mac 15.0.1 HBuilderX

目前测试 安卓和ios都出现这个问题

<map id=“map1” @tap=“tapMap” :longitude=“params.longitude” :latitude=“params.latitude” :circles=“circles”>
<cover-view class="model" v-if="isShow">
<cover-view class="p-box">
<cover-view class="title">新建成功</cover-view>
<cover-view class="p-row">
<cover-view>{{params.efName || ‘’}}</cover-view>
<cover-view>电子围栏新建成功</cover-view>
<cover-view>可同时新建3个，是否继续？</cover-view>
</cover-view>

        <cover-view class="btns">  
            <cover-view class="btn1" @click="toReturn">暂时不用</cover-view>  
            <cover-view class="btn2" @click="toCreate">去新建</cover-view>  
        </cover-view>  
    </cover-view>  
</cover-view>
</map>

.model {
position: fixed;
top: 0rpx;
right: 0;
width: 100%;
height: 100%;
z-index: 999;
background-color: rgba(0, 0, 0, .5);
}

.p-box {
width: 650rpx;
height: 416rpx;
background: #FFFFFF;
border-radius: 16rpx;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;

.btns {  
    margin-top: 42rpx;  
    display: flex;  
    justify-content: space-around;  

    .btn2 {  
        width: 200rpx;  
        height: 80rpx;  
        background: #798741;  
        border-radius: 40rpx;  
        font-family: PingFangSC, PingFang SC;  
        font-weight: 500;  
        font-size: 28rpx;  
        color: #FFFFFF;  
        line-height: 80rpx;  
        text-align: center;  
    }  

    .btn1 {  
        width: 200rpx;  
        height: 80rpx;  
        background: #231815;  
        border-radius: 40rpx;  
        border: 1rpx solid #231815;  
        text-align: center;  
        line-height: 80rpx;  
        font-family: PingFangSC, PingFang SC;  
        font-weight: 500;  
        font-size: 28rpx;  
        color: #FFFFFF;  
    }  
}  

.p-row {  
    text-align: center;  

    cover-view {  
        font-family: PingFangSC, PingFang SC;  
        font-weight: 400;  
        font-size: 24rpx;  
        color: #222222;  
        margin-bottom: 25rpx;  
    }  
}  

.title {  
    font-family: PingFangSC, PingFang SC;  
    font-weight: 500;  
    font-size: 32rpx;  
    color: #212121;  
    text-align: center;  
    margin-top: 40rpx;  
    margin-bottom: 30rpx;  
    // padding: 30rpx 0;  
}

}


Harmonyos Next教程
1 回复

在 uni-app 中，cover-view 组件设计初衷是为了在 canvas、video、map 等原生组件上覆盖显示内容，但由于原生组件和 cover-view 的渲染机制差异，确实存在一些限制，尤其是在 map 组件上的表现可能不尽如人意。cover-view 无法完全覆盖 map 组件的原因通常与平台差异、组件层级管理以及渲染机制有关。

下面是一个简单的代码示例，展示了如何在 uni-app 中使用 cover-view 覆盖 map 组件，并指出可能遇到的问题。

<template>
  <view>
    <map
      id="myMap"
      longitude="116.404"
      latitude="39.915"
      scale="14"
      style="width: 100%; height: 300px;"
    >
      <cover-view class="cover-content">
        <text>覆盖内容</text>
      </cover-view>
    </map>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 可以在这里添加方法处理地图相关事件
  },
};
</script>

<style>
.cover-content {
  position: absolute;
  top: 10px; /* 调整位置 */
  left: 10px; /* 调整位置 */
  background-color: rgba(255, 255, 255, 0.7); /* 半透明背景 */
  padding: 10px;
  border-radius: 5px;
}
</style>

在这个例子中，cover-view 被放置在 map 内部，理论上应该能够覆盖 map 的部分内容。然而，如果 cover-view 无法完全覆盖 map，可能的原因包括：

  1. 平台差异：不同平台（如微信小程序、H5、App等）对 cover-view 的支持程度不同，可能导致在不同平台上表现不一致。

  2. CSS样式问题：cover-view 的样式设置不当，如 z-index、position 等属性，可能影响其覆盖效果。

  3. map组件特性：map 组件本身的一些特性（如手势缩放、旋转等）可能干扰 cover-view 的正常显示。

  4. uni-app框架限制：uni-app 框架本身对 cover-view 和 map 的集成可能存在一些限制或bug。

由于这些限制，开发者在遇到 cover-view 无法完全覆盖 map 的问题时，可能需要根据具体平台进行调整，或者考虑使用其他方案（如自定义覆盖层）来实现需求。

回到顶部