【报Bug】app-nvue下map组件更新markers出现无效等情况（附暂时解决方法）

分类：uni-app

map

详细问题描述

（DCloud产品不会有明显的bug，所以你遇到的问题大都是在特定环境下才能重现的问题，请仔细描述你的环境和重现方式，否则DCloud很难排查解决你的问题）

[内容]

重现步骤

app-nvue使用的nvue文件里，使用map组件，清空markers，或更新markers数组时，页面没有重新渲染。
复制代码可复现问题。

暂时解决方法在代码里。

[步骤]

[结果]
app-vue 下无问题。

[期望]

[如果语言难以表述清晰，拍一个视频或截图，有图有真相]

IDE运行环境说明

HBuilderX

[IDE版本号]

2.5.1.20200103

[windows版本号]

win10 家庭版

uni-app运行环境说明

安卓app，运行环境。

[运行端版本号]

[项目是cli创建的还是HBuilderX创建的？如果是cli创建的，请更新到最新版cli再试]

HBuilderX创建

[编译模式是老模板模式还是新的自定义组件模式？]

自定义组件模式。未开启v3 编译。

App运行环境说明

[Android版本号]

Android 9

miui 11.0.4 稳定版

[手机型号]

小米8 6+64

[模拟器型号]

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志，点右键打开文件所在目录，将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段，你补充的细一点，问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]

<template>  
    <view>  
        <map id="serverMap" class="server-map" :style="{height: '500px'}" :longitude="longitude" :latitude="latitude"  
         :markers="markers" :show-location="true" @markertap="handleMarker"></map>  
        <button @tap="removeMarkers">清空markers</button>  
        <button @tap="addMarkers">增加markers</button>  
        <button @tap="reduceMarders">减少markers</button>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                longitude: '', // 地图中心经度  
                latitude: '', // 纬度   
                markers: [], // 标记点数组  
                ownLocation: { // 自己的位置  
                    longitude: '',  
                    latitude: ''  
                },  
            }  
        },  
        async onLoad() {  
            const [err_gl, res_gl] = await uni.getLocation({  
                type: 'gcj02'  
            });  
            if (err_gl) {  
                console.log(err_gl);  
            } else {  
                console.log(res_gl);  
                this.latitude = res_gl.latitude;  
                this.longitude = res_gl.longitude;  
                this.ownLocation = {  
                    latitude: res_gl.latitude,  
                    longitude: res_gl.longitude  
                };  
                this.setMarkers();  
            }  
        },  
        methods: {  
            // 点击标记点  
            handleMarker(e) {  
                const markerId = e.detail.markerId;  
                console.log(markerId);  
            },  
            // 获取markers  
            async setMarkers() {  
                const {  
                    latitude,  
                    longitude  
                } = this.ownLocation;  
                let markers = [{  
                    id: Math.random(1),  
                    latitude: latitude + 0.001 * Math.random(),  
                    longitude: longitude + 0.001 * Math.random(),  
                    iconPath: '/static/logo.png',  
                    width: 30,  
                    height: 30  
                }];  
                this.markers = markers;  
                console.log(JSON.stringify(this.markers));  
            },  

            removeMarkers() {  
                // 问题写法,后果为赋值空数组后，标记没有在地图上消失，需要重新赋值非空数组才生效  
                this.markers = [];  

                // 解决方法：写多一个假数据，  
                // 并使用es6结构语法  
                // id需要为随机数（如需要其它id,可以使用id+随机数，点击时分离字符串），  
                // const markers = [{  
                //  id: Math.random(1),  
                //  latitude: 46.52,  
                //  longitude: 83.63,  
                //  iconPath: '/static/logo.png',  
                //  width: 30,  
                //  height: 30  
                // }];  
                console.log(JSON.stringify(this.markers))  
            },  
            addMarkers() {  
                const {  
                    latitude,  
                    longitude  
                } = this.ownLocation;  
                let markers = [{  
                    id: Math.random(1),  
                    latitude: latitude + 0.001 * Math.random(),  
                    longitude: longitude + 0.001 * Math.random(),  
                    iconPath: '/static/logo.png',  
                    width: 30,  
                    height: 30  
                }];  
                // 问题写法  
                // 直接赋值 this.markers = markers  

                // 解决写法 使用es6解构 例如 this.markers = [...markers]  
                this.markers = [...this.markers, ...markers];  
                console.log(JSON.stringify(this.markers))  
            },  
            // 减少  
            reduceMarders() {  
                if (this.markers.length > 0) {  
                    // 问题写法  
                    this.markers.splice(0, 1);  
                    // 解决写法 使用es6解构  
                    // this.markers.splice(0, 1);  
                    // this.markers = [...this.markers];  
                    console.log(JSON.stringify(this.markers))  
                }  
            }  

        }  
    }  
</script>  

<style>  
    .server-map {  
        width: 750rpx;  
    }  
</style>