uni-app中uni-popup弹出层无法弹出map地图

uni-app中uni-popup弹出层无法弹出map地图

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

操作步骤：

  • uni-popup弹出层不能弹出map地图，地图是黑屏

预期结果：

  • uni-popup弹出层不能弹出map地图，地图是黑屏

实际结果：

  • uni-popup弹出层不能弹出map地图，地图是黑屏

bug描述：

  • uni-popup弹出层不能弹出map地图，地图是黑屏
3 回复

App端使用map推荐使用nvue。不然有层级问题

更多关于uni-app中uni-popup弹出层无法弹出map地图的实战教程也可以访问 https://www.itying.com/category-93-b0.html


up,的确是这样哦。

在uni-app中，uni-popup组件与map组件结合使用时出现黑屏问题，通常是由于层级冲突或渲染机制导致的。以下是常见原因及解决方案：

  1. 层级问题：
    map组件在原生环境中默认以最高层级渲染，可能被uni-popup的遮罩层覆盖。尝试调整uni-popup的z-index属性，或通过popup的mask属性设置为false禁用遮罩层测试。

  2. 渲染时机：
    确保map组件在uni-popup完全展开后再初始化。可在popup的[@open](/user/open)事件中动态加载地图，或使用v-if控制map的渲染时机。

  3. 平台差异：
    部分安卓机型对嵌套map组件的支持较差，建议将map移至页面级而非弹层内，或改用plus.nativeObj.view绘制自定义地图。

  4. 样式冲突：
    检查map容器是否设置了正确的宽高（需固定数值，百分比可能失效），并确认背景色非透明。

示例代码调整：

<uni-popup ref="popup" [@open](/user/open)="initMap">
  <map v-if="showMap" :style="{ width: '300px', height: '300px' }"></map>
</uni-popup>
回到顶部