uniapp map使用非CSS 定位和固定高度来设置，避免拉伸父容器的高度

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

除了使用 CSS 定位和固定高度，还可以通过以下方法解决这个问题：

方法三：使用计算属性设置高度

• 在 Vue 组件中，可以使用计算属性根据窗口尺寸动态计算 map 的高度。

<template>
  <view>
    <map id="myMap"></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      windowHeight: uni.getSystemInfoSync().windowHeight,
    };
  },
  computed: {
    mapHeight() {
      // 可以根据具体需求调整计算方式，这里假设减去一些固定高度作为 map 的高度
      return this.windowHeight - 100;
    },
  },
  mounted() {
    // 这里可以使用 this.mapHeight 来设置 map 的高度
    uni.createSelectorQuery().select('#myMap').boundingClientRect((rect) => {
      if (rect) {
        rect.height = this.mapHeight;
        uni.createSelectorQuery().select('#myMap').fields({ size: true }, res => {
          if (res) {
            // 根据计算后的高度更新 map 的样式
            uni.createSelectorQuery().select('#myMap').style({ height: `${this.mapHeight}px` });
          }
        }).exec();
      }
    }).exec();
  },
};
</script>

<style>
/* 可以根据需要添加一些通用样式 */
</style>

方法四：使用 JavaScript 动态设置高度

• 在页面加载完成后，通过 JavaScript 获取父容器的高度，然后减去一些固定值作为 map 的高度并设置。

<template>
  <view>
    <map id="myMap"></map>
  </view>
</template>

<script>
export default {
  mounted() {
    const parentElement = document.getElementById('parent-of-map');
    const parentHeight = parentElement.clientHeight;
    const mapElement = document.getElementById('myMap');
    mapElement.style.height = `${parentHeight - 100}px`;
  },
};
</script>

注意，在上述方法中，你可能需要根据实际情况调整计算高度的方式以及选择合适的时机来设置 map 的高度。同时，确保你的页面结构和 ID 选择器正确匹配实际的页面元素。

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

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

原文地址：https://blog.csdn.net/woaijssss/article/details/142447008

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！