1***@163.com
1***@163.com
  • 发布:2021-11-30 11:43
  • 更新:2021-12-15 15:27
  • 阅读:738

【报Bug】map组件markers里callout添加display: "ALWAYS",气泡覆盖图标

分类:uni-app

产品分类: 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>  

预期结果:

预期callout中添加 // display: "ALWAYS",气泡显示在上方

实际结果:

预期callout中添加 // display: "ALWAYS",气泡覆盖图标

bug描述:

map组件 markers属性添加callout 设置属性 display: "ALWAYS"时气泡覆盖图标,取消设置可以正常。

用的是subnvue渲染到vue页面的情况,代码是写在nvue页面。

2021-11-30 11:43 负责人:DCloud_Android_ST 分享
已邀请:
DCloud_UNI_Anne

DCloud_UNI_Anne

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

DCloud_Android_ST

DCloud_Android_ST

HX3.3.1 alpha已修复

  • vishun

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

    2023-03-28 08:22

  • vishun

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

    2023-03-28 08:52

该问题目前已经被锁定, 无法添加新回复