【报Bug】页面不显示

示例代码：

<template> <div style="margin-top:-80upx;"> <map style="width: 750rpx; height:900upx;margin-top:100upx;" id="myMap" ref="myMap" :latitude="latitude" longitude="longitude" :scale="16" :show-location="true" :enable-satellite="true" :polyline="markerPolyline"

markers="markerPoints" :polygon="markerPolygon" @markertap="tapMove"> </map>
<cover-view class="round">
<cover-image src="/static/yuan.png" style="width: 60rpx;height: 60rpx;" @click="getMapCenter">
</cover-image>
</cover-view>
<cover-view class="foot" style="" @tap="onReback">
<text>撤回</text>
</cover-view>
<cover-view class="close" @tap="onClose"><text>闭合</text></cover-view>
</div>
</template>
<script>
export default {
data() {
return {
latitude: 41.67718,
longitude: 123.4631,
landPoints: [],
isMap: false,
tempPoint: [],
tempCenterPoint: [],
distance: '',
area: '',
isClose: false,
areaMeter: ''
};
},
onLoad() {
let that = this;
uni.getLocation({
type: 'gcj02',
success: res => {
this.latitude = res.latitude;
this.longitude = res.longitude;
let pages = getCurrentPages(); //获取所有页面栈实例列表
let nowPage = pages[pages.length - 1]; //当前页页面实例
let prevPage = pages[pages.length - 2]; //上一页页面实例

            if (!!prevPage.$vm.slandPoints) {  
                this.landPoints = prevPage.$vm.slandPoints;  
            } else {  
                let prevPage = pages[pages.length - 3]; //上一页页面实例  
                this.landPoints = prevPage.$vm.slandPoints;  
            }  
            if (this.landPoints.length > 0) {  
                this.latitude = this.landPoints[0].latitude;  
                this.longitude = this.landPoints[0].longitude;  
                //this.isMap=true;  
            }  
            let clock = setInterval(() => {  
                if (this.isMap && !this.isClose) {  
                    this.getLine();  
                }  
                // clearInterval(clock);  
            }, 1000);  
        }  
    });  

},  
computed: {  
    markerPoints() {  
        if (this.landPoints.length <= 0) {  
            return [];  
        }  
        const len = this.landPoints.length;  
        // 1.多边形区域端点  
        const endPointMarkers = this.landPoints.map(item => {  
            return {  
                id: Math.random()  
                    .toString()  
                    .substr(2),  
                width: 16,  
                height: 25,  
                anchorX: 0.5,  
                anchorY: 0.5,  
                ...item  
            };  
        });  
        // 2.多边形区域线段中心点  
        let lineCenterMarkers = this.landPoints.map((item, index) => {  
            // 计算线段中心点经纬度  
            let currentPoint = item,  
                nextPoint,  
                lineCenterLongitude,  
                lineCenterLatitude,  
                distance;  

            if (index === len - 1) {  
                nextPoint = this.landPoints[0];  
                return {};  
            } else {  
                nextPoint = this.landPoints[index + 1];  
            }  

            lineCenterLongitude = (currentPoint.longitude + nextPoint.longitude) / 2;  
            lineCenterLatitude = (currentPoint.latitude + nextPoint.latitude) / 2;  
            distance = this.calculateDistance(currentPoint.longitude, currentPoint.latitude, nextPoint  
                .longitude, nextPoint.latitude);  
            //显示线中间部分xxx米距离  
            return {  
                id: Math.random()  
                    .toString()  
                    .substr(2),  
                label: {  
                    content: ``, //${distance} 米  
                    color: '#ff1166'  
                },  
                width: 2,  
                height: 2,  
                anchorX: 0.5,  
                anchorY: 0.5,  
                longitude: lineCenterLongitude,  
                latitude: lineCenterLatitude  
            };  
        });  
        lineCenterMarkers = lineCenterMarkers.filter(item => {  
            if (JSON.stringify(item) != '{}') {  
                return item;  
            }  
        });  
        // 区域面积  
        const area = this.calculateArea(  
            this.landPoints.map(item => {  
                return {  
                    lat: item.latitude,  
                    lng: item.longitude  
                };  
            })  
        );  
        this.area = area.toFixed(2);  
        return [...endPointMarkers, ...lineCenterMarkers, ...this.tempCenterPoint];  
    },  
    markerPolyline() {  
        if (this.landPoints.length + this.tempPoint.length >= 2) {  
            return [{  
                // points: [...this.landPoints, this.landPoints[0]],  
                points: [...this.landPoints, ...this.tempPoint],  
                color: '#c89d66ff',  
                width: 2  
            }];  
        }  
        return [];  
    },  
    markerPolygon() {  
        if (this.landPoints.length >= 3) {  
            return [{  
                points: [...this.landPoints],  
                fillColor: '#c89d6633', // 填充颜色  
                strokeColor: '#c89d66ff', // 边框颜色  
                strokeWidth: 2  
            }];  
        }  
        return [];  
    }  
},  
methods: {  
    tapMove(e) {  
        console.log(e, 456)  
        this.loopAnamation(this.markerPoints, 1, e.detail.markerId);  
    },  
    loopAnamation(subArray, index, markerId) {  
        const mapContext = uni.createMapContext('myMap');  
        var that = this;  
        // 如果执行完成 或者 收到新数据 停止动画  
        if (index >= subArray.length) {  
            return;  
        }  
        console.log('开始移动第', index, '个点', subArray[index], 'markId:', markerId, mapContext);  
        mapContext.translateMarker({  
            markerId: markerId,  
            autoRotate: false,  
            duration: 5000 / (subArray.length - 1),  
            destination: {  
                latitude: subArray[index].latitude,  
                longitude: subArray[index].longitude  
            },  
            animationEnd() {  
                console.log('animation end');  
                that.loopAnamation(subArray, index + 1, markerId);  
            },  
            fail: function(e) {  
                console.log('移动出错了', e);  
            }  
        });  
    },  
    onClose() {  
        let that = this;  
        console.log(this.landPoints);  
        if (this.landPoints.length >= 3) {  
            this.landPoints.push(this.landPoints[0]);  
            this.isClose = true;  
            this.tempPoint = [];  
            this.distance = '';  
            this.areaMeter = this.area;  
        }  
        console.log(this.landPoints);  
        let pages = getCurrentPages(); //获取所有页面栈实例列表  
        let nowPage = pages[pages.length - 1]; //当前页页面实例  
        let prevPage = pages[pages.length - 2]; //上一页页面实例  

        if (!!prevPage.$vm.fillModel) {  
            console.log('   prevPage.$vm.fillModel', prevPage.$vm.fillModel);  
            prevPage.$vm.slandPoints = this.landPoints;  
            prevPage.$vm.fillModel.PLANTINGAREA = (that.areaMeter / 667).toFixed(2);  
            uni.navigateBack({  
                delta: 1  
            });  
        } else {  
            let prevPage = pages[pages.length - 3]; //上一页页面实例  
            console.log('   prevPage.$vm.fillModel', prevPage.$vm.fillModel);  
            prevPage.$vm.slandPoints = this.landPoints;  
            prevPage.$vm.fillModel.PLANTINGAREA = (that.areaMeter / 667).toFixed(2);  
            uni.navigateBack({  
                delta: 2  
            });  
        }  

    },  
    onReback() {  
        this.landPoints.pop();  
        this.isClose = false;  
        this.areaMeter = '';  
    },  
    // 移动地图显示米  
    regionchangeMove(e) {  
        if (e.type == 'begin') {  
            this.isMap = true;  
            // if (this.landPoints.length != 0) {  
            //  this.getMapCenter();  
            // }  
        } else {  
            setTimeout(() => {  
                this.isMap = false;  
            }, 1000);  
            // if (this.landPoints.length > 1) {  
            //  this.onReback();  
            // }  
        }  
    },  
    getLine() {  
        const mapContext = uni.createMapContext('myMap');  
        mapContext.getCenterLocation({  
            success: res => {  
                this.tempPoint = [];  
                this.tempCenterPoint = [];  
                const {  
                    longitude,  
                    latitude  
                } = res;  
                if (this.landPoints.length <= 0) {  
                    return;  
                }  
                let lastPoint = this.landPoints[this.landPoints.length - 1];  
                let lineCenterLongitude = (lastPoint.longitude + longitude) / 2;  
                let lineCenterLatitude = (lastPoint.latitude + latitude) / 2;  
                let distance = this.calculateDistance(lastPoint.longitude, lastPoint.latitude,  
                    longitude, latitude);  
                this.tempPoint.push(res);  
                this.distance = distance;  
            }  
        });  
    },  
    getMapCenter(e) {  
        console.log(1);  
        if (this.isClose) {  
            return;  
        }  
        const mapContext = uni.createMapContext('myMap');  
        mapContext.getCenterLocation({  
            success: res => {  
                const {  
                    longitude,  
                    latitude  
                } = res;  
                this.landPoints.push({  
                    longitude,  
                    latitude  
                });  
                // 兼容安卓机型地图问题(农田标记打点会跳回原始地图中心点)  
                if (uni.getSystemInfoSync().platform == 'android') {  
                    setTimeout(() => {  
                        //mapContext.updateComponents({  
                        //  longitude,  
                        //  latitude  
                        //});  
                    }, 0);  
                }  
            }  
        });  
    },  
    tapMap(res) {  
        // this.landPoints.push(res.detail);  
    },  
    //计算长度  
    calculateDistance(lng1, lat1, lng2, lat2) {  
        lat1 = lat1 || 0;  
        lng1 = lng1 || 0;  
        lat2 = lat2 || 0;  
        lng2 = lng2 || 0;  

        var rad1 = (lat1 * Math.PI) / 180.0;  
        var rad2 = (lat2 * Math.PI) / 180.0;  
        var a = rad1 - rad2;  
        var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;  
        var r = 6378137;  
        var distance = r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) *  
            Math.pow(Math.sin(b / 2), 2)));  
        return distance.toFixed(2);  
    },  
    //计算面积  
    calculateArea(path) {  
        let radius = 6371009;  
        let len = path.length;  
        if (len < 3) return 0;  
        let total = 0;  
        let prev = path[len - 1];  
        let prevTanLat = Math.tan((Math.PI / 2 - (prev.lat / 180) * Math.PI) / 2);  
        let prevLng = (prev.lng / 180) * Math.PI;  
        for (let i in path) {  
            let tanLat = Math.tan((Math.PI / 2 - (path[i].lat / 180) * Math.PI) / 2);  
            let lng = (path[i].lng / 180) * Math.PI;  
            total += this.polarTriangleArea(tanLat, lng, prevTanLat, prevLng);  
            prevTanLat = tanLat;  
            prevLng = lng;  
        }  
        return Math.abs(total * (radius * radius));  
    },  
    // 面积辅助  
    polarTriangleArea(tan1, lng1, tan2, lng2) {  
        let deltaLng = lng1 - lng2;  
        let t = tan1 * tan2;  
        return 2 * Math.atan2(t * Math.sin(deltaLng), 1 + t * Math.cos(deltaLng));  
    }  
}  

};
</script>
<style>
.round {
width: 120rpx;
height: 120rpx;
position: fixed;
top: 470upx;
left: 347upx;

}

.close {
width: 200rpx;
height: 80rpx;
border-radius: 10rpx;
background-color: #f27b0d;
line-height: 80rpx;
color: #ffffff;
text-align: center;
position: fixed;
bottom: 80rpx;
right: 50rpx;
}

.foot {
position: fixed;
height: 76rpx;
width: 76rpx;
align-items: center;
justify-content: center;
bottom: 80rpx;
right: 60rpx;
background: rgba(255, 255, 255, 0.94);
border-radius: 38rpx;
z-index: 999999;
width: 200rpx;
height: 80rpx;
border-radius: 10rpx;
background-color: #ffffff;
border: 2rpx solid #f27b0d;
line-height: 80rpx;
color: #f27b0d;
text-align: center;
position: fixed;
bottom: 80rpx;
left: 50rpx;
}
</style>

操作步骤：

页面什么都不显示

预期结果：

正常显示地图

实际结果：

页面什么都不显示