uni-app vue3 安卓手机上气泡不显示 h5可以正常显示

uni-app vue3 安卓手机上气泡不显示 h5可以正常显示

开发环境 版本号 项目创建方式
Windows win10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10

HBuilderX类型：正式

HBuilderX版本号：4.57

手机系统：Android

手机系统版本号：Android 14

手机厂商：荣耀

手机机型：HONOR 70

页面类型：vue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

示例代码：
<template> <view class="orderDetails"> <view class=""> <z-tabs :list="menuList" :current="current" @change="tabsChange" /> </view> 
    <map :style="{width: '750rpx',height: mapHeight + 'px'}" class="map" :latitude="mapCenter.latitude"  
        @markertap="onMarkerTap" :longitude="mapCenter.longitude" :markers="markers" :enable-zoom="true" scale="12"  
        :enable-scroll="true"></map>  

</view>
</template> <script> import utils from '@/common/utils.js' const sysInfo = uni.getSystemInfoSync(); export default { data() { return { current: 0, status: 2, scale: 13, mapHeight: sysInfo.screenHeight, mapCenter: { longitude: 114.050476, latitude: 32.994881 }, menuList: [{ name: '新任务', value: '2', }, { name: '待取货', value: '12', }, { name: '配送中', value: '4', } ], markers: [], orderList: [], deviceBrand: '' }; }, onLoad(e) { let that = this // 地图标标记 that.markers = [ //用户标记 { id: 1, callout: { content: '收货地址', color: '#2979ff', padding: '6', borderRadius: '10', textAlign: 'left', fontSize: '14', display: 'ALWAYS' }, longitude: 114.050476, latitude: 32.994881, iconPath: '/data/system/map_home.png', width: '40', height: '40' } ]; }, onUnload() {}, computed: {}, methods: { } }; </script> ```

操作步骤： 手机端直接运行

预期结果： 正常显示气泡

实际结果： 无显示

bug描述： 安卓手机上只显示一个点


更多关于uni-app vue3 安卓手机上气泡不显示 h5可以正常显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

该bug反馈内容基本完整，包含标题、描述、代码示例、复现步骤等必要信息，但描述可更详细（如是否特定条件下不显示）。代码示例完整可直接运行，复现步骤"手机端直接运行"稍简略但结合代码可复现。预期结果合理，实际结果表明存在兼容性问题。
经分析，该bug很可能成立。主要依据：

知识库明确说明map组件marker气泡callout的display属性在Android平台对Google地图仅支持’BYCLICK’，而用户设置display: 'ALWAYS’可能导致不显示
用户使用HBuilderX 4.57（非最新版），可能存在已修复的兼容性问题
H5与App渲染机制差异：App端使用系统WebView（Android 14对应较新内核），而H5使用标准浏览器，可能导致CSS/组件渲染差异

非误报，属典型平台兼容性问题。建议：

尝试将display改为’BYCLICK’验证是否为平台限制
检查是否使用Google地图（国内通常用高德，需确认manifest.json配置）
更新至最新HBuilderX（当前正式版已高于4.57）
参考WebView兼容性处理方案引入X5内核增强兼容性

注意：uni-app App端使用WebView渲染，与H5的浏览器环境存在差异，属正常现象而非bug。 内容为 AI 生成，仅供参考

更多关于uni-app vue3 安卓手机上气泡不显示 h5可以正常显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


最后一个图是安卓手机真机上运行的

经测试，腾讯地图可以，高德不显示

在uni-app的map组件中，安卓App上callout气泡不显示的问题通常与平台差异和配置有关。以下是几个关键排查点：

  1. callout配置问题：安卓原生地图对callout的支持与H5不同。确保callout对象包含必填属性，特别是display字段设置为'ALWAYS'（你已配置正确）。

  2. 图标路径问题：App端需要使用绝对路径或base64。将iconPath改为绝对路径，例如：

    iconPath: '/static/map_home.png' // 确保图片在static目录下

    或使用网络图片URL。

  3. 平台差异处理：建议使用条件编译处理平台差异：

    // #ifdef APP-PLUS
callout: {
  content: '收货地址',
  display: 'ALWAYS'
  // 安卓可能需要简化样式
}
// #endif
回到顶部