t***@qq.com
t***@qq.com
  • 发布:2025-07-15 17:04
  • 更新:2025-07-15 17:12
  • 阅读:23

【报Bug】map组件内容发生变化后,callout气泡弹窗有一定概率还在

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win11

HBuilderX类型: 正式

HBuilderX版本号: 4.75

浏览器平台: Chrome

浏览器版本: 最高

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="max-w-[576px] m-auto">  
        <v-nav-bar :title="appStore.currentSubMenu.title" left-text="返回" back-url="/pages/index/index" />  
        <view>  
            <uni-data-select :clear="false" v-model="current" :localdata="selectData" @change="onChange" />  
        </view>  
        <view>  
            <map  
                style="width: 100%; height: calc(100vh)"  
                :latitude="centerLat"  
                :longitude="centerLng"  
                :enable-3D="true"  
                :markers="markers"  
                @markertap="onClick"  
            />  
        </view>  
    </view>  
    <v-tabbar />  
</template>  

<script setup>  
import useAppStore from "@/stores/app"  
import { ref } from "vue"  
import { getRisk307List } from "@/pagesC/api/risk"  
import { onLoad } from "@dcloudio/uni-app"  
import { navigateTo } from "@/utils/tools"  

const appStore = useAppStore()  

const markers = ref([])  
const centerLng = ref(106.476767)  
const centerLat = ref(29.501814)  
const selectData = ref([  
    {  
        text: "全部",  
        value: 0,  
    },  
    {  
        text: "低",  
        value: 1,  
    },  
    {  
        text: "一般",  
        value: 2,  
    },  
    {  
        text: "较大",  
        value: 3,  
    },  
    {  
        text: "重大",  
        value: 4,  
    },  
])  
const current = ref(0)  

const onChange = () => {  
    getData()  
}  

const onClick = (e) => {  
    const { markerId } = e.detail  
    navigateTo(`/pagesB/work/work1_detail?id=${markerId}&type=0&backUrl=/pagesC/risk/id307`)  
}  

const getData = async () => {  
    markers.value = await getRisk307List({ level: current.value })  
}  

onLoad(async () => {  
    await getData()  
    centerLng.value = markers.value[0].longitude  
    centerLat.value = markers.value[0].latitude  
})  
</script>  

返回值:

{  
    "code": 1,  
    "msg": "操作成功",  
    "data": [  
        {  
            "id": 399,  
            "title": "锅炉水封挡板未完善,易引起误动",  
            "lnglat": "106.461839,29.507446",  
            "latitude": "29.507446",  
            "longitude": "106.461839",  
            "iconPath": "https://kodo.aqygj.com/h5/images/poi-marker-red.png",  
            "callout": {  
                "markerId": 399,  
                "content": "锅炉水封挡板未完善,...",  
                "borderRadius": 3,  
                "display": "ALWAYS"  
            }  
        },  
        {  
            "id": 400,  
            "title": "在锅炉12.6m至炉顶等处高空作业",  
            "lnglat": "106.461732,29.507483",  
            "latitude": "29.507483",  
            "longitude": "106.461732",  
            "iconPath": "https://kodo.aqygj.com/h5/images/poi-marker-red.png",  
            "callout": {  
                "markerId": 400,  
                "content": "在锅炉12.6m至炉...",  
                "borderRadius": 3,  
                "display": "ALWAYS"  
            }  
        }  
    ],  
    "show": 0  
}

操作步骤:

111

预期结果:

不存在的marker,气泡也需要跟着消失

实际结果:

气泡偶尔消失,偶尔不消失

bug描述:

map组件markers发生变化后,callout气泡弹窗有一定概率还在

2025-07-15 17:04 负责人:无 分享
已邀请:
DCloud_UNI_yuhe

DCloud_UNI_yuhe

能否提供一下完整的能复现的项目,我运行一下看看

  • t***@qq.com (作者)

    这个你用mockjs模拟下就知道了,callout概率不随着marker消失

    2025-07-16 09:32

  • t***@qq.com (作者)

    <map    
    style="width: 100%; height: calc(100vh)"
    :latitude="centerLat"
    :longitude="centerLng"
    :enable-3D="true"
    :markers="markers"
    @markertap="onClick"
    />

    主要就是这块,你给他一点数据

    2025-07-16 09:33

  • t***@qq.com (作者)

    然后改变markers的数据,随机增减,然后观察气泡

    2025-07-16 09:51

要回复问题请先登录注册