uni-app 使用高德/百度地图时官方map组件不支持需求只能用官方API 地图生成的iframe撑高页面底部导致布局异常

不知道现在为什么cdn引入百度地图一直提示BMap未定义,暂时复现不了

在使用 uni-app 开发时，如果你需要使用高德或百度地图，并且官方 map 组件无法满足需求，转而使用官方 API 生成的地图 iframe，可能会导致页面布局异常，特别是 iframe 撑高页面底部的问题。以下是一些解决方案和建议：

1. 使用 position: fixed 或 position: absolute

如果你希望地图固定在页面的某个位置，可以使用 position: fixed 或 position: absolute 来定位 iframe，这样可以避免 iframe 撑高页面底部。

<template>
  <view class="container">
    <!-- 其他内容 -->
    <iframe
      class="map-iframe"
      src="https://www.amap.com/embed/your-map-url"
      frameborder="0"
    ></iframe>
  </view>
</template>

<style>
.container {
  position: relative;
  height: 100vh;
}

.map-iframe {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 300px; /* 根据需要调整高度 */
}
</style>

2. 动态设置 iframe 高度

如果你希望 iframe 的高度根据内容动态调整，可以使用 JavaScript 动态设置 iframe 的高度。

<template>
  <view class="container">
    <!-- 其他内容 -->
    <iframe
      ref="mapIframe"
      class="map-iframe"
      src="https://www.amap.com/embed/your-map-url"
      frameborder="0"
      @load="onIframeLoad"
    ></iframe>
  </view>
</template>

<script>
export default {
  methods: {
    onIframeLoad() {
      const iframe = this.$refs.mapIframe;
      iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
    }
  }
}
</script>

<style>
.container {
  position: relative;
  height: 100vh;
}

.map-iframe {
  width: 100%;
  height: 0; /* 初始高度为0，动态调整 */
}
</style>

3. 使用 flex 布局

如果你希望地图与其他内容共享页面空间，可以使用 flex 布局来分配空间。

<template>
  <view class="container">
    <view class="content">
      <!-- 其他内容 -->
    </view>
    <iframe
      class="map-iframe"
      src="https://www.amap.com/embed/your-map-url"
      frameborder="0"
    ></iframe>
  </view>
</template>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.content {
  flex: 1;
  overflow-y: auto;
}

.map-iframe {
  flex: 0 0 300px; /* 固定高度 */
  width: 100%;
}
</style>

4. 使用 vh 单位

如果你希望地图占据页面的一部分，可以使用 vh 单位来设置 iframe 的高度。

<template>
  <view class="container">
    <!-- 其他内容 -->
    <iframe
      class="map-iframe"
      src="https://www.amap.com/embed/your-map-url"
      frameborder="0"
    ></iframe>
  </view>
</template>

<style>
.container {
  position: relative;
  height: 100vh;
}

.map-iframe {
  width: 100%;
  height: 50vh; /* 占据页面的一半高度 */
}
</style>

5. 使用 scroll-view 包裹内容

如果页面内容较多，可以使用 scroll-view 包裹内容，避免 iframe 撑高页面。

<template>
  <view class="container">
    <scroll-view scroll-y="true" class="content">
      <!-- 其他内容 -->
    </scroll-view>
    <iframe
      class="map-iframe"
      src="https://www.amap.com/embed/your-map-url"
      frameborder="0"
    ></iframe>
  </view>
</template>

<style>
.container {
  position: relative;
  height: 100vh;
}

.content {
  height: calc(100vh - 300px); /* 减去地图高度 */
  overflow-y: auto;
}

.map-iframe {
  width: 100%;
  height: 300px; /* 固定高度 */
}
</style>