uni-app nvue页面map组件多次隐藏显示后地图内容不显示

uni-app nvue页面map组件多次隐藏显示后地图内容不显示

# 产品分类
uni小程序SDK

# 手机系统
iOS

# 手机系统版本号
iOS 17

# 手机厂商
模拟器

# 手机机型
iphone14

# 页面类型
nvue

# SDK版本号
4.11

## 示例代码：
```html
<view v-if="showMap">  
<map  id="map" scale="15"></map>  
</view>

操作步骤：

  • 不停切换地图显示隐藏

预期结果：

  • 切换地图显示隐藏不影响地图显示

实际结果：

  • 不停切换地图显示隐藏，地图显示异常

bug描述：

map组件使用高德地图
使用 v-if 不断切换显示隐藏，多次之后地图内容不显示，只有地图logo，和粉色背景（代码没有设置），真机时是黑色背景，如附件所示。
安卓的不会，只出现在iOS上

bug图片


更多关于uni-app nvue页面map组件多次隐藏显示后地图内容不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

我在nvue中好几个组件出现此问题，我是将v-if改用了定位的方式来解决的，position:absolute，不显示定位移出屏幕外，显示时再移回来，目前没什么问题

更多关于uni-app nvue页面map组件多次隐藏显示后地图内容不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


有时候不一定使用vif也会出现，不停的退出页面进入页面也可能出现。而且这个方式我们用不了…因为有要改position进行全屏展示功能。nvue修改position需要和vif配合才能生效。。

回复 9***@qq.com: 而且出现后必须杀掉app才能恢复。其他每个页面的地图都会不显示。

确实会这样 我那些nvue页面的map也都用v-if切换了 不过我只在进入页面onload的时候刷新数据切换一次 没有频繁来回切换 也会偶现黑屏现象 这样的话理论上ios上的map只要加了v-if在每次切换中都有可能黑屏

我把v-if都给去掉了 解决办法：covers和markers不用push 直接整数组赋值可以代替v-if 我这边的问题应该是解决了 谢谢提问的楼主

在使用 uni-app 的 nvue 页面时，如果 map 组件在多次隐藏和显示后出现地图内容不显示的问题，这可能是由于 map 组件的生命周期或渲染机制引起的。以下是一些可能的解决方案和优化建议：

1. 使用 v-if 控制组件的销毁和重建

  • 如果地图组件在隐藏时不需要保持状态，可以使用 v-if 来完全销毁和重建地图组件，而不是使用 v-show 来隐藏和显示。
  • 这样可以确保每次显示地图时都是重新初始化的，避免因多次隐藏和显示导致的状态问题。
<template>
  <view>
    <map v-if="showMap" style="width: 100%; height: 300px;"></map>
    <button @click="toggleMap">Toggle Map</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showMap: true
    };
  },
  methods: {
    toggleMap() {
      this.showMap = !this.showMap;
    }
  }
};
</script>

2. 手动触发地图的重绘

  • 如果地图内容在显示后不更新，可以尝试手动触发地图的重绘。可以通过改变地图组件的 key 属性来强制重新渲染。
<template>
  <view>
    <map :key="mapKey" style="width: 100%; height: 300px;"></map>
    <button @click="toggleMap">Toggle Map</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showMap: true,
      mapKey: 0
    };
  },
  methods: {
    toggleMap() {
      this.showMap = !this.showMap;
      if (this.showMap) {
        this.mapKey += 1; // 改变 key 强制重新渲染
      }
    }
  }
};
</script>

3. 检查地图组件的生命周期

  • 确保在 map 组件的生命周期中正确地初始化和销毁相关资源。例如，在 onLoad 和 onUnload 生命周期钩子中进行必要的操作。
export default {
  onLoad() {
    // 初始化地图相关资源
  },
  onUnload() {
    // 清理地图相关资源
  }
};

4. 使用 nvue 的 visibility 属性

  • 在 nvue 中，map 组件可以通过 visibility 属性控制其可见性。尝试使用 visibility 属性来隐藏和显示地图，而不是使用 v-show 或 v-if。
<template>
  <view>
    <map :style="{ visibility: showMap ? 'visible' : 'hidden' }" style="width: 100%; height: 300px;"></map>
    <button @click="toggleMap">Toggle Map</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showMap: true
    };
  },
  methods: {
    toggleMap() {
      this.showMap = !this.showMap;
    }
  }
};
</script>
回到顶部