地图高度显示 每次都可能不一样

我使用地图的时候，地图高度显示 每次都可能不一样
如下图，

代码如下：

<template>  
    <view>  
        <view class="page-body">  
            <view class="page-section page-section-gap">  
                <map @markertap="mktap" v-bind:style="[{width:'100%', height: height + 'px' }]" :latitude="latitude" :longitude="longitude" :markers="covers">  
                </map>  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
    var _self;  
    export default {  
        data() {  
            return {  
                height:0,  
                title: '首页',  
                latitude: 39.909,  
                longitude: 116.39742,  
                covers: [{  
                    id:'map_1',  
                    label:{  
                        content:'店铺1'  
                    },  
                    latitude: 39.909,  
                    longitude: 116.39742,  
                    iconPath: '../../static/shop.png'  
                }, {  
                    id:'map_2',  
                    label:{  
                        content:'店铺2'  
                    },  
                    latitude: 39.90,  
                    longitude: 116.39,  
                    iconPath: '../../static/shop.png'  
                }]  
            }  
        },        
        onLoad:function(options){  
            _self = this;  
            uni.getSystemInfo({  
                success: function (res) {  
                    _self.height = res.windowHeight ;  
                }  
            });  
        },  
        methods: {  
            mktap(e){  
                uni.navigateTo({  
                    url: '../jishi/jishi?id='+e.mp.markerId.replace('map_','')  
                });  
            }  
        }  
    }  
</script>

应该怎么样做才能显示正常？