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 选择器正确匹配实际的页面元素。

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

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