uni-app nvue map callout display:'always' 不起作用

uni-app nvue map callout display:‘always’ 不起作用

5 回复

此设备在旧版是否正常？ 此版本使用其他设备是否正常？

更多关于uni-app nvue map callout display:'always' 不起作用的实战教程也可以访问 https://www.itying.com/category-93-b0.html


用下面的代码测试没有问题，气泡一直显示 方恒国际 阜通东大街6号 确定是nvue页面运行到真机吗？ <template>
<view style="flex: 1;">
<map style="flex: 1;" :markers="markers"></map>
</view>
</template>

<script> const testMarkers = [{ id: 0, latitude: 39.989631, longitude: 116.481018, title: '方恒国际 阜通东大街6号', zIndex: '1', rotate: 0, width: 20, height: 20, anchor: { x: 0.5, y: 1 }, callout: { content: '方恒国际 阜通东大街6号', color: '#00BFFF', fontSize: 10, borderRadius: 4, borderWidth: 1, borderColor: '#333300', bgColor: '#CCFF99', padding: '5', display: 'ALWAYS' } }, { id: 1, latitude: 39.9086920000, longitude: 116.3974770000, title: '天安门', zIndex: '1', iconPath: '/static/logo.png', width: 40, height: 40, anchor: { x: 0.5, y: 1 }, callout: { content: '首都北京\n天安门', color: '#00BFFF', fontSize: 12, borderRadius: 2, borderWidth: 0, borderColor: '#333300', bgColor: '#CCFF11', padding: '1', display: 'BYCLICK' } } ]; export default { data() { return { markers: testMarkers } }, methods: { } } </script>

这段代码我手机上也是点击才显示，可能是我手机系统的问题 小米6 miui11

我换label了，暂时能满足需求

在 nvue 的 map 组件中，callout 的 display 属性设置为 'always' 在某些平台或特定场景下可能确实无法按预期工作。这通常与平台原生实现的差异或组件自身的渲染机制有关。

核心原因分析：

  1. 平台差异：nvue 的 map 组件本质上是调用原生地图控件（如高德、百度 SDK）。不同平台（iOS、Android）对 callout（标注气泡）的常显支持程度可能不同。'always' 属性可能在某些原生 SDK 中未被完全实现或存在限制。
  2. 渲染时机：标注的 callout 可能在标记点（marker）首次加载或地图状态变化时，其显示逻辑受到原生地图事件（如点击、拖动）的影响，导致 'always' 模式被重置。
  3. 性能优化：地图组件为保障渲染性能，可能会自动管理 callout 的显示（例如仅在点击标记点时触发），覆盖 display 设置。

建议解决方案：

  • 检查平台兼容性：确认 'always' 在目标平台（iOS/Android）是否被支持。可尝试分别测试双端。
  • 使用 marker 的 callout 属性：确保在 marker 对象中正确配置 callout，例如：
    marker: {
  id: 1,
  latitude: 39.909,
  longitude: 116.397,
  callout: {
    content: '常显标注',
    display: 'ALWAYS', // 注意：值可能是大写，需参考官方文档
    fontSize: 14
  }
}
回到顶部