map组件内容发生变化后 uni-app callout气泡弹窗有一定概率还在

map组件内容发生变化后 uni-app callout气泡弹窗有一定概率还在

开发环境 版本号 项目创建方式
Windows win11 HBuilderX

产品分类：

uniapp/H5

PC开发环境操作系统：

Windows

HBuilderX类型：

正式

HBuilderX版本号：

4.75

浏览器平台：

Chrome

浏览器版本：

最高

示例代码：

<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>  
```

#### 返回值：  

```json
{  
    "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  
}

更多关于map组件内容发生变化后 uni-app callout气泡弹窗有一定概率还在的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

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

更多关于map组件内容发生变化后 uni-app callout气泡弹窗有一定概率还在的实战教程也可以访问 https://www.itying.com/category-93-b0.html


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

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

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

请问解决了吗

能否提供一下完整的能复现的项目

这是一个已知的uni-app map组件在H5端的渲染问题。当markers数组内容更新时，map组件有时无法正确清理之前的气泡弹窗。

建议在更新markers前先清空现有标记：

const getData = async () => {
    // 先清空markers
    markers.value = []
    // 强制触发一次渲染
    await nextTick()
    // 再设置新数据
    markers.value = await getRisk307List({ level: current.value })
}

另外，可以尝试在callout配置中设置display: 'BYCLICK'替代'ALWAYS'，这样气泡只在点击时显示，能减少残留概率：

callout: {
    markerId: 399,
    content: "锅炉水封挡板未完善，...",
    borderRadius: 3,
    display: "BYCLICK"  // 改为点击显示
}
回到顶部