1***@qq.com
1***@qq.com
  • 发布:2022-03-02 11:49
  • 更新:2022-03-11 21:01
  • 阅读:1711

使用uniapp地图map组件中点聚合功能,闪退【报Bug】

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 3.3.11

手机系统: Android

手机系统版本号: Android 10

手机厂商: 红米

手机机型: note 9

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<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>

操作步骤:

打开页面数据加载不全就闪退,切换数据也会闪退

预期结果:

页面正常打开显示,数据切换后,点聚合也正常显示,不会闪退

实际结果:

打开数据加载不全直接闪退,切换数据也闪退

bug描述:

用uniapp中的地图组件中的点聚合功能,打开页面数据加载不全就闪退,切换数据也会闪退

2022-03-02 11:49 负责人:DCloud_Android_THB 分享
已邀请:
DCloud_Android_THB

DCloud_Android_THB

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)  
                    }  
                })  
DCloud_UNI_Anne

DCloud_UNI_Anne

HBuilderX alpha 3.4.2 已修复

该问题目前已经被锁定, 无法添加新回复