uni-app 页面不显示 Bug

开发环境	版本号	项目创建方式
Windows	18363.1556	HBuilderX

示例代码：

<template> </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.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>