_Nora_
_Nora_
  • 发布:2022-09-16 15:46
  • 更新:2024-01-04 14:37
  • 阅读:578

nvue使用地图,map组件的markers更新时,地图上不显示customCallout

分类:nvue

不用setTimeout直接赋值markers,结果是正常的:

使用setTimeout赋值markers,结果不正常,未显示自定义气泡:

出现问题的示例代码如下:

<template>  
    <view class="content">  
        <map id="map" :markers="covers" class="map" :show-location="true" :latitude="latitude" :longitude="longitude"  
            @callouttap="oncallouttap">  
            <cover-view slot="callout">  
                <template v-for="(item,index) in covers">  
                    <cover-view :marker-id="item.id" :key="item.id" class="customCallout">  
                        <cover-image class="icon" src="../../static/0.png"></cover-image>  
                        <cover-view>  
                            customCallout  
                        </cover-view>  
                    </cover-view>  
                </template>  
            </cover-view>  
        </map>  
    </view>  
</template>  
<script>  
    const img = '/static/logo.png';  
    export default {  
        data() {  
            return {  
                latitude: 39.9086920000,  
                longitude: 116.3974770000,  
                covers: []  
            }  
        },  
        onLoad() {  
            setTimeout(() => {  
                this.covers = [{  
                        id: 1,  
                        latitude: 39.9086920000,  
                        longitude: 116.3974770000,  
                        iconPath: '../../static/logo.png',  
                        width: 40,  
                        height: 40,  
                        customCallout: {  
                            display: "ALWAYS"  
                        }  
                    },  
                    {  
                        id: 2,  
                        latitude: 39.9096920000,  
                        longitude: 116.3984770000,  
                        iconPath: '../../static/logo.png',  
                        width: 40,  
                        height: 40,  
                        customCallout: {  
                            display: "ALWAYS"  
                        }  
                    }  
                ]  
            }, 1000)  
        },  
        methods: {  
            oncallouttap(e) {  
                uni.showModal({  
                    content: JSON.stringify(e)  
                })  
            }  
        }  
    }  
</script>  
<style>  
    .content {  
        flex: 1;  
    }  

    .icon {  
        width: 20px;  
        height: 20px;  
    }  

    .map {  
        width: 750rpx;  
        height: 500px;  
    }  

    .customCallout {  
        background-color: #aaffff;  
        border: 1px solid #ff5500;  
        border-radius: 30px;  
        width: 200px;  
        height: 40px;  
        display: flex;  
        flex-direction: row;  
        justify-content: center;  
        align-items: center;  
    }  

    .test {  
        width: 200px;  
        background-color: aliceblue;  
    }  
</style>  
2022-09-16 15:46 负责人:无 分享
已邀请:
9***@qq.com

9***@qq.com

解决了吗

  • _Nora_ (作者)

    没有,我感觉是官方组件问题,也没人理

    2022-10-13 15:49

  • 哈哈哈888

    回复 1***@qq.com: 解决了吗

    2023-01-30 11:02

ddpapa

ddpapa

解决了吗

  • _Nora_ (作者)

    没有解决

    2023-08-30 17:01

9***@qq.com

9***@qq.com - 小丑。

原来老早就有这些bug,不付费估计是不会解决了。

要回复问题请先登录注册