uniapp中map组件动态添加覆盖物（解决数据更新而视图不更新）

uniapp中map组件动态添加覆盖物（解决数据更新而视图不更新）

uniapp的坑是真的多，每天都踩坑，日常记录一下

问题：map组件动态添加覆盖物时，数据更新了但视图没有更新

先介绍一下怎么使用map组件添加覆盖物,这里介绍Polygons（其他一样）

<map
	class="map"
	id="map"
	ref="map"
	:controls="controls"
	:scale="scale"
	:longitude="longitude"
	:latitude="latitude"
	:show-location="showLocation"
	@tap="maptap"
	:polyline="polyline"
	:polygons="polygons"
></map>

数据部分

data() {
		return {
			longitude: 119.30885015480821,
			latitude: 26.081970543514533
			controls: [
				{
					id: 1,
					position: {
						left: 5,
						top: 180,
						width: 30,
						height: 30
					},
					iconPath: '/static/logo.png',
					clickable: true
				}
			],
			showLocation: false,
			scale: 12,
			polyline: [],
			polygons: [],

		};
	},
	onReady() {
		//这里和上面map组件进行绑定
		this.map = uni.createMapContext('map', this);
	},

添加覆盖物

这里需要重点说明，要以数组的形式直接赋给 polygons 变量，不要用 push 一个一个对象直接加进polygons，那样无法正常渲染。

addPolygons() {
	const testPolygons = [{
            points: [{
                    latitude: 39.781892,
                    longitude: 116.293413
                },
                {
                    latitude: 39.787600,
                    longitude: 116.391842
                },
                {
                    latitude: 39.733187,
                    longitude: 116.417932
                },
                {
                    latitude: 39.704653,
                    longitude: 116.338255
                }
            ],
            fillColor: '#FFCCFF',
            strokeWidth: 3,
            strokeColor: '#CC99CC',
            zIndex: 11
        },
        {
            points: [{
                    latitude: 39.887600,
                    longitude: 116.518932
                },
                {
                    latitude: 39.781892,
                    longitude: 116.518932
                },
                {
                    latitude: 39.781892,
                    longitude: 116.428932
                },
                {
                    latitude: 39.887600,
                    longitude: 116.428932
                }
            ],
            fillColor: '#CCFFFF',
            strokeWidth: 5,
            strokeColor: '#CC0000',
            zIndex: 3
        }
    ];
     this.polygons = testPolygons;
},

动态添加polygons

 addPolygons() {
 	//添加一个polygons, 这里points的值自己修改
 	let polygon = {
            points: [{
                    latitude: 39.887600,
                    longitude: 116.518932
                },
                {
                    latitude: 39.781892,
                    longitude: 116.518932
                },
                {
                    latitude: 39.781892,
                    longitude: 116.428932
                },
                {
                    latitude: 39.887600,
                    longitude: 116.428932
                }
            ],
            fillColor: '#CCFFFF',
            strokeWidth: 5,
            strokeColor: '#CC0000',
            zIndex: 3
        };
        //这里记住先把原有的覆盖物拷贝一份
        let testPolygons = this.polygons;
        //把新的覆盖物加如数组
        testPolygons。push(polygon);
        //重新赋为polygons 
    	this.polygons = testPolygons;
},

本来说上面一套流程走下来没啥问题

但是
出问题了，数据是更新了，但没有渲染出来

最后在大佬的指点下，利用解构然后赋值的方法解决了

把上面的最后一行代码修改为：

this.polygons = [...testPolygons];

不明白为什么，感觉很神奇！！！
今天就记录到这