6***@qq.com
6***@qq.com
  • 发布:2020-06-04 16:36
  • 更新:2021-09-22 09:27
  • 阅读:736

【报Bug】nvue 地图动态添加一批markers 然后在点击 会卡死闪退

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 10.15.4 (19E287)

HBuilderX类型: 正式

HBuilderX版本号: 2.7.9

手机系统: iOS

手机系统版本号: iOS 13.2

手机厂商: 苹果

手机机型: iPone 6s

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

操作步骤:

1.nvue 页面中 创建 map
2.在视野发生变化时 根据 let nmap = uni.createMapContext('map1', this); nmap.getRegion() 获取视图经纬度 然后在请求数据
3.数据请求到 markers 更新数据
4.点击markers 卡死

预期结果:

点击markers 触发 地图放大 根据scale获取 下一层级的数据

实际结果:

卡死

bug描述:

    <view>  
        <map  
            style="width: 1500rpx; height: 2668rpx;"  
            ref="map1"  
            id="map1"  
            :latitude="latitude"  
            :longitude="longitude"  
            :scale="scale"  
            :markers="covers"  
            :circles="circles"  
            @callouttap="callouttap($event)"  
            @regionchange="regionchange"  
        ></map>  
    </view>  
</template>  
export default {  
    data() {  
        return {  
            // longitude: '', //中心经度  
            // latitude: '', //中心纬度  
            latitude: 39.909,  
            longitude: 116.39742,  
            scale: 13, //缩放级别,取值范围为5-18  
            covers: [{  
                    latitude: 39.909,  
                    longitude: 116.39742,  
                    iconPath: '../../static/logo.png',  
                    width:80,  
                    height:80,  
                    title: "sss",  
                    label: {  
                        content: "ss",  
                        color: '#ef0000',  
                        x: -10,  
                        y: -20,  
                        bgColor: '#000',  
                        textAlign: 'center',  
                        padding:30,  
                    },  
                }  
            ], //标记点  
            controls: [], //控件  
            circles:[{  
                // latitude: 39.909,  
                // longitude: 116.39742,  
                // radius:10000,  
                // fillColor:"#3333333",  
                // color:'#3333333'  

            }],  
            northeast: {}, // 西南角 获取地图的  
            southwest: {}, //东北角获取地图的  
            northEast: '', //东北角坐标 接口参数  
            southWest: '', //西南角坐标  
            level: '', //地图层级(1:省、2:市、3:区、4:设备详情)  
            dxtCode: '', //设备类型编码(支持多选)  
            location: '', //安装位置  
            deviceName: '', //设备名称  
            identifier: '', //设备编号  
            deviceStatus: '' //设备状态  
        };  
    },  
methods: {  
        callouttap(e) {  
            // 点击标记点对应的气泡时触发,e.detail = {markerId}  
            console.log(e)  
        },  
        regionchange(e) {  
            // 视野发生变化时触发  
            // console.log(e);  
            // if (e.type == 'end') {  

                let nmap = uni.createMapContext('map1', this);  
                nmap.getRegion({  
                    success: res => {  
                        console.log(res);  
                        this.northeast = res.northeast;  
                        this.southwest = res.southwest;  
                         this.getMapListData();  
                    },  
                    fail: ress => {  
                        // console.log(ress);  
                    }  
                });  
                nmap.getScale({  
                    success: res => {  
                        // console.log(res);  
                        console.log('-------1------');  
                        this.scale = res.scale;  
                        if (res.scale == 3 || res.scale == 4 || res.scale == 5 || res.scale == 6 || res.scale == 7) {  
                            //判断地图层级 根据层级获取对应的数据  
                            this.level = 1;  
                        }  
                        if (res.scale == 8 || res.scale == 9 || res.scale == 10 || res.scale == 11) {  
                            this.level = 2;  
                        }  
                        if (res.scale == 12 || res.scale == 13 || res.scale == 14 || res.scale == 15) {  
                            this.level = 3;  
                        }  
                        if (res.scale == 16 || res.scale == 17 || res.scale == 18) {  
                            this.level = 4;  
                        }  
                         this.getMapListData();  
                    }  
                });  
            // }  
        },  
        getMapListData() {  
            let por = {  
                // northeast: {}, // 西南角 获取地图的  
                // southwest: {}, //东北角获取地图的  
                southWest: this.southwest.longitude + ',' + this.southwest.latitude, //东北角坐标 接口参数  
                northEast:this.northeast.longitude + ',' + this.northeast.latitude, //西南角坐标  
                level: this.level, //地图层级(1:省、2:市、3:区、4:设备详情)  
                dxtCode: this.dxtCode, //设备类型编码(支持多选)  
                location: this.location, //安装位置  
                deviceName: this.deviceName, //设备名称  
                identifier: this.identifier, //设备编号  
                deviceStatus: this.deviceStatus //设备状态  
            };  
            console.log(por);  
            getMapList(por).then(res => {  
                console.log(res.data);  
                let listData = res.data;  
                if (listData.code == 200) {  
                    // listData.result.dcountVoList  
                    let Datas = listData.result.dcountVoList;  

                    if (Datas) {  
                        this.covers = [];  
                        for (let i = 0; i < Datas.length; i++) {  
                            this.covers.push({  
                                latitude: Datas[i].latitude,  
                                longitude: Datas[i].longitude,  
                                iconPath: '../../static/logo.png',  
                                title: Datas[i].deviceNum..toString(),  
                                width:80,  
                                height:80,  
                                label: {  
                                    content: Datas[i].deviceNum.toString(),  
                                    color: '#ef0000',  
                                    x: -10,  
                                    y: -20,  
                                    bgColor: '#000000',  
                                    textAlign: 'center'  
                                }  
                            });  
                        }  
                    }  
                }  
            });  
        }  
    }
2020-06-04 16:36 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

相同的问题,请问有解决的方案吗?

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