uni-app Map 组件 Marker-callout-textAlign: center 属性在 iOS 不生效

uni-app Map 组件 Marker-callout-textAlign: center 属性在 iOS 不生效

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
PC系统版本 win11
HBuilderX 3.2.3
手机系统 iOS
手机版本 iOS 15
手机厂商 苹果
手机机型 iphone 11
页面类型 nvue
打包方式 云端
项目创建方式 CLI
CLI版本号 3.2.3

bug描述：

HbuilderX 自定义调试基座运行
如图，Android 正常，iOS 不生效

image

操作步骤：

预期结果：

实际结果：


更多关于uni-app Map 组件 Marker-callout-textAlign: center 属性在 iOS 不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

问题复现，后续优化，已加分 ，感谢您的反馈！

更多关于uni-app Map 组件 Marker-callout-textAlign: center 属性在 iOS 不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


HX3.2.13+ 版本已修复此问题

ok~

这是一个已知的 iOS 原生地图组件限制问题。marker-callout 的 textAlign 属性在 iOS 端确实存在兼容性问题，iOS 原生地图的标注弹窗文本对齐方式不支持通过该属性直接控制。

解决方案：

  1. 调整文本内容：在 iOS 端，可以通过在文本前后添加空格或换行符来模拟居中效果，但这属于临时方案。
  2. 使用自定义弹窗：更可靠的方案是放弃原生 callout，改用 cover-view 或自定义组件实现地图标注的弹窗，这样可以完全控制样式和布局。
  3. 条件编译：针对 iOS 和 Android 平台分别处理，在 iOS 端采用替代方案。

示例代码（使用条件编译）：

<map>
  <marker>
    <callout>
      <!-- #ifdef APP-IOS -->
      <text class="ios-callout"> 你的文本 </text>
      <!-- #endif -->
      <!-- #ifdef APP-ANDROID -->
      <text class="android-callout">你的文本</text>
      <!-- #endif -->
    </callout>
  </marker>
</map>
回到顶部