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

• 推荐学习文档
  • 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>

这样可以避免 map 组件在设置高度为 100% 时拉伸父容器的高度，同时确保 map 能够以合适的方式显示在页面中。

希望本文对你有所帮助！如果你有任何问题或建议，欢迎在评论区留言。

关注我看更多有意思的文章哦！👉👉