<template>
<view class="">
<view class="n-ddd" v-if="isShowtab === 1">
<view class="n-math-box-right" style="justify-content: center;" v-if="regionchose == false">
<view class="n-mathrgt pd-top-5" @click="power(0),removeMarkers()"
:class="skillcheck == 0? 'prower':''">
<text class="align-center ft-size-18" style="color: #FE7547;">{{dz}}</text>
<text class="ft-size-12 pd-bottom-5">电站</text>
</view>
<view class="n-mathrgt pd-top-5" @click="power(1),removeMarkers()"
:class="skillcheck == 1? 'prower':''">
<text class="align-center ft-size-18" style="color: #B56CFD;">{{zb}}</text>
<text class="ft-size-12 pd-bottom-5">直播</text>
</view>
<view class="n-mathrgt pd-top-5" @click="power(112),removeMarkers()"
:class="skillcheck == 112? 'prower':''">
<text class="align-center ft-size-18" style="color: #09C8FA;">{{hhr}}</text>
<text class="ft-size-12 pd-bottom-5 ">合伙人</text>
</view>
<view class="n-mathrgt pd-top-5" @click="power(113),removeMarkers()"
:class="skillcheck == 113? 'prower':''">
<text class="align-center ft-size-18" style="color: #7068F8;">{{xmd}}</text>
<text class="ft-size-12 pd-bottom-5">公司</text>
</view>
</view>
<map id="map" class="map" :scale="scale" enable-satellite="true" :latitude="latitude" :longitude="longitude"
@markertap="tap" @labeltap='tap'
:style="{height: nowMapIndex ? nintyPercentScreenHeight : seventyPercentScreenHeight,width:'750rpx'}">
</map>
</view>
</view>
</template>
<style>
.n-ddd {
/* width: 375px; */
}
.n-stmode {
width: 94rpx;
height: 94rpx;
position: fixed;
z-index: 9;
right: 16rpx;
bottom: 280rpx;
border-radius: 12rpx;
background: #fff;
box-shadow: 0px 8rpx 16rpx 0px rgba(0, 0, 0, 0.08), 0px -8rpx 16rpx 0px rgba(0, 0, 0, 0.08);
justify-content: center;
align-items: center;
}
.n-fix-screen {
width: 94rpx;
height: 94rpx;
background: #fff;
position: fixed;
z-index: 2;
right: 16rpx;
bottom: 160rpx;
border-radius: 12rpx;
box-shadow: 0px 8rpx 16rpx 0px rgba(0, 0, 0, 0.08), 0px -8rpx 16rpx 0px rgba(0, 0, 0, 0.08);
justify-content: center;
align-items: center;
}
.n-math-box-right {
width: 84rpx;
border-radius: 12rpx;
position: fixed;
right: 20rpx;
top: 132rpx;
z-index: 1;
background: #fff;
}
.n-sximg {
width: 38rpx;
height: 38rpx;
margin-top: 12rpx;
}
.n-mathrgt {
justify-content: center;
align-items: center;
}
.prower {
background: rgba(238, 238, 238, 0.48)
}
.n-chose-region {
width: 400rpx;
height: 40px;
position: fixed;
left: 180rpx;
top: 20rpx;
background-color: #fff;
border-radius: 12rpx;
flex-direction: row-reverse;
}
.n-livein {
width: 64px;
height: 32rpx;
background: rgba(0, 0, 0, 0.32);
position: absolute;
bottom: 0;
line-height: 30rpx;
z-index: 2;
}
.n-all-math-box {
height: 80rpx;
position: fixed;
z-index: 10;
left: 0;
top: 0;
flex-direction: row;
}
.n-ch-math {
width: 187.5rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
}
.chk_math {
font-size: 32rpx;
color: #00B277;
}
.n-low-line {
width: 72rpx;
height: 6rpx;
background: #00b277;
border-radius: 10rpx;
position: absolute;
left: 50%;
bottom: 0rpx;
margin-left: -36rpx;
z-index: 1;
}
.n-smclr {
width: 60rpx;
height: 36rpx;
text-align: center;
font-size: 24rpx;
color: #fff;
line-height: 36rpx;
font-weight: 400;
border-radius: 4rpx;
}
</style>
<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
import {
listyx,
listxmd,
listzb
} from '@/public/utils/index.js'
import {
mathlistArr
} from '@/public/utils/mathlist.js'
// import {
// covers
// } from '@/public/utils/map.js'
import api from "@/common/api"
const img = '/static/ad.png';
export default {
data() {
return {
// url:"/pages/datatwo/datatwo",
code: 100000,
linkage: 1,
scale: 3,
isShow: 0,
isShowtab: 1,
checkname: "",
regionchose: false,
pickerText: '',
skillcheck: 0,
showTips: false,
filterData: [], // 展示的数据
listzj: [],
listyx,
listhhr: [],
//公司
listhcomp: [],
listxmd,
listzb,
nowMapIndex: true,
phoneHeight: '', //屏幕高
phoneWidth: '', //屏幕宽
latitude: 39.909,
longitude: 116.39742,
covers: [],
dz: 0,
zb: 0,
hhr: 0,
xmd: 0,
state: 0,
oldShow: null,
}
},
async onReady() {
// this.map = uni.createMapContext("map", this);
var that = this
//that.$tip.loading();
//获取电站数量
await this.queryCounts();
//获取电站
await this.queryProjects();
this._mapContext = uni.createMapContext("map", this);
// 仅调用初始化,才会触发 on.("markerClusterCreate", (e) => {})
this._mapContext.initMarkerCluster({
enableDefaultStyle: false,
zoomOnClick: true,
gridSize: 60,
complete(res) {
console.log('initMarkerCluster', res)
}
});
this._mapContext.on("markerClusterCreate", (e) => {
console.log("markerClusterCreate", e);
});
this.queryProjects();
},
methods: {
removeMarkers() {
this._mapContext.addMarkers({
clear: true,
markers: []
})
},
async queryProjectType(val) {
const marker = {
id: 1,
width: 50,
height: 50,
// joinCluster: true, // 指定了该参数才会参与聚合
};
// 获取首页各分类电站
let concent = ''
let jsonParam = {}
let that = this
jsonParam.type = val;
await api.queryAPPTypeList(jsonParam).then((res) => {
if (res.data.success) {
uni.showLoading({
title:'加载中'
})
that.covers = res.data.result.records || res.data.result
// debugger
console.log(that.covers.length)
const markers = []
that.covers.forEach((p, i) => {
const newMarker = Object.assign(marker, p)
newMarker.id = that.covers[i].id
markers.push(newMarker)
this._mapContext.addMarkers({
markers,
clear: false,
// complete(res) {
// console.log('addMarkers', res)
// }
})
})
uni.hideLoading()
} else {
//that.$tip.loaded();
uni.showToast({
title: '获取电站失败',
icon: 'none'
});
}
}).catch(error => {
if (error) {
concent = error;
}
})
if (concent) {
uni.showToast({
title: concent,
icon: 'none'
});
}
},
//获取所有电站
async queryProjects() {
const marker = {
id: 1,
width: 50,
height: 50,
// joinCluster: true, // 指定了该参数才会参与聚合
};
let concent = ''
let that = this
let queryParam = {}
queryParam.jsonParam = "nvue"
uni.showLoading({
title:'加载中'
})
// 获取首页电站
await api.getHomeProjectList(queryParam).then((res) => {
if (res.data.success) {
uni.showLoading({
title:'加载中'
})
that.covers = res.data.result.records || res.data.result
console.log(that.covers.length)
const markers = []
that.covers.forEach((p, i) => {
const newMarker = Object.assign(marker, p)
newMarker.id = that.covers[i].id
markers.push(newMarker)
this._mapContext.addMarkers({
markers,
clear: false,
})
})
uni.hideLoading()
} else {
uni.showToast({
title: '获取电站失败',
icon: 'none'
});
}
}).catch(error => {
if (error) {
concent = error;
}
})
if (concent) {
uni.showToast({
title: concent,
icon: 'none'
});
}
},
//获取电站分类数量
async queryCounts() {
let that = this;
// 获取数量
await api.getAPPHomeCount().then((res) => {
if (res.data.success) {
let counts = res.data.result.records || res.data.result
that.zb = counts.zb;
that.dz = counts.dz;
that.hhr = counts.hhr;
that.xmd = counts.xmd;
} else {
uni.showToast({
title: '获取电站数量失败!',
icon: 'none'
});
}
}).catch(error => {
if (error) {
concent = error;
}
})
},
//视图电站数据分类显示
async power(val) {
this.state = val
this.skillcheck = val;
let that = this
//获取电站数量
await that.queryCounts();
if (val === 0) {
//获取电站
await that.queryProjects();
} else {
//获取电站
await that.queryProjectType(val);
}
},
},
components: {
uniNavBar,
}
}
</script>
- 发布:2022-03-02 11:49
- 更新:2022-03-11 21:01
- 阅读:2047
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10
HBuilderX类型: 正式
HBuilderX版本号: 3.3.11
手机系统: Android
手机系统版本号: Android 10
手机厂商: 红米
手机机型: note 9
页面类型: nvue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
打开页面数据加载不全就闪退,切换数据也会闪退
打开页面数据加载不全就闪退,切换数据也会闪退
预期结果:
页面正常打开显示,数据切换后,点聚合也正常显示,不会闪退
页面正常打开显示,数据切换后,点聚合也正常显示,不会闪退
实际结果:
打开数据加载不全直接闪退,切换数据也闪退
打开数据加载不全直接闪退,切换数据也闪退
bug描述:
用uniapp中的地图组件中的点聚合功能,打开页面数据加载不全就闪退,切换数据也会闪退
bug已确认, 临时解决方案:
addMarkers是一个批量增加markers的方法,看你代码是循环进行批量增加,建议组合好数据后再进行addMarkers,例:
const markers = [];
positions.forEach((p, i) => {
const newMarker = Object.assign(JSON.parse(JSON.stringify(marker)), p)
newMarker.id = i + 1
newMarker.label.content = `label ${i + 1}`
markers.push(newMarker)
})
const mapContext = uni.createMapContext("map", this);
mapContext.addMarkers({
markers,
clear: false,
complete(res) {
console.log('addMarkers', res)
}
})
1***@qq.com (作者)
已解决,感谢
2022-03-02 16:45
T_T无辜的程序
回复 1***@qq.com: 楼主,我就是按照那个方式去做的,还是会闪退,你的解决了吗
2022-04-12 10:04
DCloud_Android_THB
回复 T_T无辜的程序: 使用alpha最新版可以解决此问题
2022-04-12 11:14
T_T无辜的程序
回复 DCloud_Android_THB: 好的,我试下
2022-04-12 11:47
T_T无辜的程序
回复 DCloud_Android_THB: 使用alpha最新版闪退更厉害,以前还可以点,现在进页面就闪退,我使用的是nvue页面,挂载在vue的subNVues下的
2022-04-14 10:17
DCloud_Android_THB
回复 T_T无辜的程序: 留一下q,给我apk,我帮你看一下。
2022-04-14 12:48
T_T无辜的程序
回复 DCloud_Android_THB: q 1003142921
2022-04-14 13:40
T_T无辜的程序
回复 DCloud_Android_THB: 谢谢
2022-04-14 13:40
T_T无辜的程序
回复 DCloud_Android_THB: 你回复我的是安卓的解决办法吗,安卓目前闪退很少,但是ios直接用不了了
2022-04-14 14:06
DCloud_Android_THB
回复 T_T无辜的程序: 是iOS啊 ,Android这边近期的优化,我做了测试循环500次的addmarkers也不会出现闪退,要是ios,你重新发一个ask吧,提供你的信息和示例。
2022-04-14 15:33
T_T无辜的程序
回复 DCloud_Android_THB: 稍等
2022-04-14 16:18