uni-app map组件markers里callout添加display: "ALWAYS"，气泡覆盖图标

uni-app map组件markers里callout添加display: “ALWAYS”，气泡覆盖图标 产品分类：uniapp/App
PC开发环境操作系统：Windows
PC开发环境操作系统版本号：2017.8
HBuilderX类型：正式
HBuilderX版本号：3.2.16
手机系统：Android
手机系统版本号：Android 12
手机厂商：华为
手机机型：小米
页面类型：nvue
vue版本：vue2
打包方式：云端
项目创建方式：HBuilderX

示例代码：

<template>  
  <view id="concat">  
    <map class="pr" style="width: 100%; height: 300px" :latitude="latitude" :longitude="longitude" :markers="markers">  
    </map>  
  </view>  
</template>  
<script>  
  export default {  
    data() {  
      return {  
        latitude: 26.072381,  
        longitude: 119.311519,  
        startData: {  
          screenX: "",  
          screenY: "",  
        },  
        markers: [  
          {  
            id: 0,  
            latitude: 26.072381,  
            longitude: 119.311519,  
            iconPath: "/static/logo.png",  
            title: "这里是文本",  
            callout: {  
              // display: "ALWAYS",  
              content: "这里是文本",  
              bgColor: "#fff",  
              textAlign: "center",  
              padding: "4",  
            },  
          },  
        ],  
      };  
    },  
  };  
</script>  
<style>  
  .input {  
    width: 100%;  
    height: 100rpx;  
    background-color: aqua;  
  }  
  .drag {  
    width: 750px;  
    height: 80rpx;  
    background-color: blanchedalmond;  
    position: absolute;  
    bottom: 0;  
  }  
</style>

操作步骤：

<template>  
  <view id="concat">  
    <map class="pr" style="width: 100%; height: 300px" :latitude="latitude" :longitude="longitude" :markers="markers">  
    </map>  
  </view>  
</template>  
<script>  
  export default {  
    data() {  
      return {  
        latitude: 26.072381,  
        longitude: 119.311519,  
        startData: {  
          screenX: "",  
          screenY: "",  
        },  
        markers: [  
          {  
            id: 0,  
            latitude: 26.072381,  
            longitude: 119.311519,  
            iconPath: "/static/logo.png",  
            title: "这里是文本",  
            callout: {  
              // display: "ALWAYS",  
              content: "这里是文本",  
              bgColor: "#fff",  
              textAlign: "center",  
              padding: "4",  
            },  
          },  
        ],  
      };  
    },  
  };  
</script>  
<style>  
  .input {  
    width: 100%;  
    height: 100rpx;  
    background-color: aqua;  
  }  
  .drag {  
    width: 750px;  
    height: 80rpx;  
    background-color: blanchedalmond;  
    position: absolute;  
    bottom: 0;  
  }  
</style>

更多关于uni-app map组件markers里callout添加display: "ALWAYS"，气泡覆盖图标的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

问题复现，这边排查下，已加分，感谢您的反馈！

更多关于uni-app map组件markers里callout添加display: "ALWAYS"，气泡覆盖图标的实战教程也可以访问 https://www.itying.com/category-93-b0.html


HX3.3.1 alpha已修复

目前我的版本是3.7.3.20230223，在h5中还是有覆盖的问题，不管display设置还是不设置。

发现原因了，必须要设置下marker的width和height，不设置就会重合。

在 uni-app 的 map 组件中，当设置 callout 的 display 为 “ALWAYS” 时，气泡会默认覆盖在图标上方，这是地图组件的原生行为。目前没有直接通过样式或属性调整气泡与图标层叠顺序的配置。

可以尝试以下方案：

  1. 调整 callout 的 anchorY 属性：通过设置 callout 的 anchorY 为负值（例如 -1），将气泡向上偏移，减少对图标的遮挡。
    callout: {
  display: "ALWAYS",
  content: "这里是文本",
  bgColor: "#fff",
  textAlign: "center",
  padding: "4",
  anchorY: -20 // 根据实际效果调整数值
}
回到顶部