uni-app map组件 h5端 android 腾讯地图只显示一半

uni-app map组件 h5端 android 腾讯地图只显示一半

操作步骤：

  • 1

预期结果：

  • 正常

实际结果：

  • 只显示一半

bug描述：

map组件 h5端 android 腾讯地图只显示一半

信息类别 详细信息
产品分类 uniapp/H5
PC开发环境 Windows
PC开发环境版本 默认
HBuilderX类型 正式
HBuilderX版本 4.08
浏览器平台 微信内置浏览器
浏览器版本 默认
项目创建方式 HBuilderX

image


更多关于uni-app map组件 h5端 android 腾讯地图只显示一半的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

也没有官方的人员 回复一下吗

更多关于uni-app map组件 h5端 android 腾讯地图只显示一半的实战教程也可以访问 https://www.itying.com/category-93-b0.html


还没客服回复一下吗。。。都这么久了

有没有更详细的线索提供一下，后续我们转给腾讯地图那边

目前是 app里webview的 h5页面 ，安卓手机 只显示一半 苹果正常

打开10次 有78次都是只显示一半

回复 Spring_CTH: 再提供点详细线索：安卓机型系统版本，安卓的系统浏览器内是否显示正常？webview是自己的webview还是uni-app/plus 的webview？

回复 DCloud_UNI_GSQ: 所有的安卓手机 都是这样的 自己的webview

在 uni-app 中使用 <map> 组件时，遇到在 H5 端 Android 平台上腾讯地图只显示一半的问题，可能是由于以下几个原因导致的。你可以尝试以下解决方案来排查和解决这个问题：

1. 检查容器高度

  • 确保 <map> 组件的父容器或 map 组件本身设置了正确的高度。如果高度设置不正确，可能会导致地图只显示一部分。
  • 例如：
    <template>
  <view style="height: 100vh;">
    <map style="width: 100%; height: 100%;"></map>
  </view>
</template>
  • 确保 map 组件的高度设置为 100%，并且其父容器也有足够的高度。

2. 检查布局问题

  • 确保地图组件的布局没有被其他元素遮挡或挤压。检查是否有可能影响地图显示的其他 CSS 样式或布局。

3. 动态设置高度

  • 如果地图的高度是动态计算的，确保在页面加载完成后正确地计算并设置地图的高度。
  • 例如：
    <template>
  <view :style="{ height: mapHeight + 'px' }">
    <map style="width: 100%; height: 100%;"></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      mapHeight: 0
    };
  },
  mounted() {
    this.mapHeight = window.innerHeight;
  }
};
</script>

4. 地图初始化问题

  • 在某些情况下，地图可能在页面加载时没有正确初始化。你可以尝试在 mounted 或 onReady 生命周期钩子中强制刷新地图。
  • 例如：
    <template>
  <view style="height: 100vh;">
    <map id="myMap" style="width: 100%; height: 100%;"></map>
  </view>
</template>

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      const mapContext = uni.createMapContext('myMap', this);
      mapContext.moveToLocation();
    });
  }
};
</script>

5. 检查腾讯地图的配置

  • 确保你在 manifest.json 中正确配置了腾讯地图的 AppKey 和其他相关设置。
  • 例如：
    {
  "h5": {
    "sdkConfigs": {
      "map": {
        "qqmap": {
          "appKey": "你的腾讯地图AppKey"
        }
      }
    }
  }
}
回到顶部