uni-app map markers 无法通过push方式追加点渲染

uni-app map markers 无法通过push方式追加点渲染

产品分类：

uniapp/App

打包方式：

云端

项目创建方式：

HBuilderX

PC开发环境操作系统

Windows

示例代码：

<template>  
    <view style="display: flex;">  
        <view :style="{height:headHeight}" class="head">  
            <view><button class="head-button" plain="true" type="default"><text class="head-button-text">取消</text></button></view>  
            <view><button class="head-button confirm-btn" type="default"><text class="head-button-text"> 确定</text></button></view>  
        </view>  
        <view style="display: flex;" :style="{height:pageHeight}">  
            <view class="map">  
                <map id="addressMap" ref="addressMap" class="map" :style="{height:mapHeight}" @regionchange="onRegionchange" :markers="covers"></map>  
            </view>  
        </view>  
    </view>  

</template>  

<script>  
    //#ifdef APP-PLUS  
    let mapSearch = weex.requireModule('mapSearch');  
    //#endif  
    export default {  
        components: {  
            ndSearchBar  
        },  
        data() {  
            return {  
                path: {  
                    page: {},  
                    req: {},  
                },  
                systemInfo: {},  
                headHeight: '',  
                pageHeight: '',  
                mapHeight: '',  

                searchShow: true,  

                local: true,  

                searchName: '',  

                searchTimeout: {  
                    task: null,  
                    id: ''  
                },  

                mapContex: null,  
                covers: [],  
                currentGps: {},  

                arroundAddress: {  
                    page: {  
                        currentPage: 1  
                    },  
                    rows: [],  
                    checked: {},  
                    refreshing: false,  
                    //  3公里内  
                    area: 3000  
                },  
                searchAddress: {  
                    page: {  
                        currentPage: 1  
                    },  
                    rows: [],  
                    checked: {},  
                    refreshing: false,  
                    //  3000万公里内  
                    area: 30000000000  
                },  
            }  
        },  
        created() {  
            let _this = this;  

            _this.initMap();  
            _this.localAddress();  
        },  
        methods: {  
            initMap() {  
                let _this = this;  
                _this.mapContex = uni.createMapContext("addressMap", this);  
            },  
            initSearchAddress() {  
                let _this = this;  
                _this.searchAddress.page.currentPage = 1;  
                _this.searchAddress.rows = [];  
                _this.searchAddress.checked = {};  
            },  
            clickSearch() {  
                let _this = this;  
                if (_this.local) {  
                    _this.initSearchAddress();  
                    _this.local = false;  
                }  
            },  
            searchCancel() {  
                let _this = this;  
                _this.local = true;  
            },  
            localAddress() {  
                let _this = this;  
                uni.getLocation({  
                    type: 'gcj02',  
                    geocode: true,  
                    success: function(res) {  
                        _this.currentGps = {  
                            longitude: res.longitude,  
                            latitude: res.latitude  
                        };  
                        _this.arroundAddress.center = _this.currentGps;  
                        _this.moveTo(_this.currentGps);  

                        let currentAddress = {  
                            id: 1,  
                            longitude: res.longitude,  
                            latitude: res.latitude,  
                            iconPath: '/static/common/image/map/point.png',  
                            width: 30,  
                            height: 30  
                        };  
                        // 不能push 的方式加入,这种方式不显示  
                        // _this.covers.push(currentAddress);  
                         _this.covers=[currentAddress]  
                    },  
                    fail(er) {  
                        console.error(er);  
                    }  
                })  

            },  

            //这个都一样  
            moveTo(address) {  
                let _this = this;  
                _this.mapContex.moveToLocation({  
                    longitude: address.longitude,  
                    latitude: address.latitude,  
                    success(moveRes) {  
                        console.log(moveRes);  
                    },  
                    fail(moveErr) {  
                        console.error(moveErr);  
                    }  
                })  
            },  
            search() {},  
            uuid(obj) {  
                let data = JSON.stringify(obj);  

                let result = sha1(data);  
                console.log(result);  
                return result;  

            }  

        },  
        onReady() {  
            let _this = this;  
            _this.systemInfo = uni.getSystemInfoSync();  
            console.log(_this.systemInfo);  
            _this.headHeight = (_this.systemInfo.statusBarHeight * 2 + uni.upx2px(70)) + 'px';  
            _this.pageHeight = (_this.systemInfo.safeArea.height - 2) + 'px';  
            _this.mapHeight = (_this.systemInfo.safeArea.height * 0.5) + 'px';  

            uni.onKeyboardHeightChange(res =>{  
                console.log(res);  
                if (res.height > 0) {  
                    _this.mapHeight = (_this.systemInfo.safeArea.height - res.height) * 0.4 + 'px';  
                } else {  
                    _this.mapHeight = (_this.systemInfo.safeArea.height * 0.5) + 'px';  
                }  

            })  
        }  

    }  
</script>  

<style>  
    .head {  
        background-color: #303133;  
        width: 750rpx;  
        flex-direction: row;  
        justify-content: space-between;  
        align-items: center;  
        background-image: linear-gradient(to top, rgba(237, 236, 232, 0.1), rgba(110, 110, 110, 0.6));  
        padding-left: 30rpx;  
        padding-right: 30rpx;  

        position: fixed;  
        top: 0rpx;  
        left: 0rpx;  
    }  

    .head-button {  

        border-width: 0rpx;  
        height: 50rpx;  
        width: 110rpx;  

    }  

    .head-button-text {  
        color: #ffffff;  
        font-size: 14px;  
    }  

    .cancel-btn {  
        background-color: rgba(255, 255, 255, 0);  
    }  

    .confirm-btn {  
        background-color: #6dd46c;  
    }  

    .map {  
        width: 750rpx;  

        transition-property: height;  
        transition-duration: 0.3s;  
        transition-timing-function: ease-out;  
    }  

    .footer {  
        width: 750rpx;  
        flex: 1;  
        display: flex;  

        transition-property: height;  
        transition-duration: 0.3s;  
        transition-timing-function: ease-out;  

        background-color: #ffffff;  
    }  

    .address-cell {  
        display: flex;  
        flex-direction: row;  
        justify-content: space-between;  
        border-bottom-width: 1rpx;  
        border-color: #e7e7e7;  
        padding: 20rpx 20rpx;  
        align-items: center;  
        height: 150rpx;  
    }  

    .text-line {  
        lines: 1;  
        text-overflow: ellipsis;  
    }  

    .address-name {  
        color: #202020;  
    }  

    .address-detailed {  
        color: #757575;  
        font-size: 12px;  
        padding-top: 10rpx;  
    }  

    .address-checked {  
        width: 50rpx;  
    }  
</style>

操作步骤：

当前定位获取后，修改代码的可以复现

// 不能push 的方式加入,这种方式不显示  
// _this.covers.push(currentAddress);  
_this.covers=[currentAddress]

预期结果：

_this.covers.push(currentAddress); 的方式也可以渲染出来位置

实际结果：

push的方式没有渲染出来

bug描述：

map 设置markers 的时候不是动态增加点 _this.covers.push(currentAddress) 不渲染页面，需要使用 _this.covers=[currentAddress] 的方式才渲染