uniapp map设置高度为100%后,会拉伸父容器的高度

news2024/9/24 6:29:56

推荐学习文档
- golang应用级os框架，欢迎star
- golang应用级os框架使用案例，欢迎star
- 案例：基于golang开发的一款超有个性的旅游计划app经历
- golang实战大纲
- golang优秀开发常用开源库汇总
- 想学习更多golang知识，这里有免费的golang学习笔记专栏
- 想学习更多前端知识，这里有免费的前端专栏

在 UniApp 中，当给 map 组件设置高度为 100% 时确实可能会拉伸父容器的高度，这通常是因为 100% 的高度是相对于父元素的高度计算的，而如果父元素没有明确的高度定义，就可能出现这种情况。
以下是一些解决方法：

方法一：使用 CSS 定位和固定高度

为包含 map 的容器设置明确的高度，可以通过像素值或者使用 vh（视口高度单位）等相对单位来定义。

  .map-container {
     height: 500px; /* 或者 height: 80vh; 等其他明确的高度值 */
   }

在 HTML 结构中，将 map 放置在这个有明确高度的容器内。

   <template>
     <view class="map-container">
       <map id="myMap"></map>
     </view>
   </template>

方法二：使用 flex 布局

将父容器设置为 flex 布局，并为 map 所在的容器分配一定的 flex 比例，以确保其高度适应父容器的剩余空间。

  .parent-container {
     display: flex;
     flex-direction: column;
   }
  .map-container {
     flex: 1;
   }

在 HTML 结构中，确保将 map 放置在正确的容器内。

   <template>
     <view class="parent-container">
       <!-- 其他内容 -->
       <view class="map-container">
         <map id="myMap"></map>
       </view>
     </view>
   </template>