hugHB
hugHB
  • 发布:2023-03-13 17:58
  • 更新:2023-03-13 17:58
  • 阅读:250

【报Bug】点击地图marker,label被遮盖。

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.7.3

手机系统: Android

手机系统版本号: Android 9.0

手机厂商: 小米

手机机型: MIX2

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

<!-- mapcore.nvue -->
<template>

<view id="coreID" style="display: flex;flex-direction: row;justify-content: center;">  
    <map :longitude="117.615201" :latitude="35.516849" :scale="10.5"  
        :style="'height:'+windowHeight*3.5+'rpx;width:'+windowWidth*4+'rpx'" :markers="markers">  
    </map>  

</view>  

</template>

<script>
export default {
data() {
return {
windowHeight: uni.getSystemInfoSync().windowHeight,
windowWidth: uni.getSystemInfoSync().windowWidth,
title:"",
markers:[]
};
},
onLoad() {
// 监听事件
uni.$on('sendNum', (res) => {
console.log('我收到报文了======')
//this.number = res.num
//this.title = res.title//
//this.markers = [];
this.markers = res.markers
})
},
updated() {
console.log('来源于地图MAP',this.markers)
},
onUnload() {
// 移除监听事件
uni.$off('sendNum');
},
methods:{

    }  
}  

</script>
<style>

</style>

<!-- map.vue -->
var that = this;
var temp = this.netArrayData;
that.markers = [];
temp.forEach((item, index, temp) => {

                var markerObj = new Object();  
                markerObj.id = index + (that.type * 10000000) + ((Math.floor(Math.random() * 1000) + 1) * 100)  
                markerObj.latitude = parseFloat(item.latitude)  
                markerObj.longitude = parseFloat(item.longitude)  
                var calloutObj = new Object();  
                calloutObj.color = '#ffffff'  
                calloutObj.bgColor = '#563BFF'  
                calloutObj.display = 'BYCLICK'  
                calloutObj.fontSize = 22  
                calloutObj.textAlign = 'left'  
                calloutObj.padding = 5  
                calloutObj.borderRadius = 3  
                console.log(that.type, '!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!')  
                if (that.type == 2) {  
                    calloutObj.content = item.riverCrossName  
                } else {  
                    calloutObj.content = item.stationName  
                }  
                console.log('走我11')  
                markerObj.callout = calloutObj;  
                console.log('走我22')  
                var labelObj = new Object();  

                labelObj.content = "";  
                if (that.type == 1) {  
                    if (that.currentItem == 'AQI') {  
                        labelObj.content = item.aqiData  
                    } else if (that.currentItem == 'PM25') {  
                        labelObj.content = item.pm25  
                    } else if (that.currentItem == 'PM10') {  
                        labelObj.content = item.pm10  
                    } else if (that.currentItem == 'SO2') {  
                        labelObj.content = item.so2  
                    } else if (that.currentItem == 'NO2') {  
                        labelObj.content = item.no2  
                    } else if (that.currentItem == 'O3') {  
                        labelObj.content = item.o3  
                    } else if (that.currentItem == 'CO') {  
                        labelObj.content = item.co;  
                    }  
                } else if (that.type == 5 || that.type == 7 || that.type == 2) {  
                    if (that.currentItem == 'COD') {  
                        labelObj.content = item.huaxue  
                    } else if (that.currentItem == 'ANDAN') {  
                        labelObj.content = item.andan  
                    }  
                } else if (that.type == 6) {  
                    if (that.currentItem == 'SO2') {  
                        labelObj.content = item.so2  
                    } else if (that.currentItem == 'NOX') {  
                        labelObj.content = item.danyang  
                    } else if (that.currentItem == 'DUST') {  
                        labelObj.content = item.keliwu  
                    }  
                }  
                if (labelObj.content == '' || typeof(labelObj.content) == 'undefined') {  
                    labelObj.content = '--'  
                }  

                labelObj.color = '#000000'  
                labelObj.fontSize = 24  
                labelObj.bgColor = 'transparent'  
                labelObj.borderRadius = 5  
                labelObj.padding = 5  
                labelObj.anchorX = -(this.getTextByteLen(labelObj.content) + 2) * labelObj.fontSize * 0.2  
                labelObj.anchorY = -82  
                labelObj.textAlign = 'center'  
                markerObj.label = labelObj;  
                markerObj.width = 72  
                markerObj.height = 96  
                markerObj.title = calloutObj.content  

                if (parseInt(labelObj.content) >= 0 && parseInt(labelObj.content) <= 50) {  
                    markerObj.iconPath = '/static/images/dt_kq1.png'  
                } else if (parseInt(labelObj.content) > 50 && parseInt(labelObj.content) <= 200) {  
                    markerObj.iconPath = '/static/images/dt_kq2.png'  
                } else if (parseInt(labelObj.content) > 200 && parseInt(labelObj.content) <= 300) {  
                    markerObj.iconPath = '/static/images/dt_kq3.png'  
                } else if (parseInt(labelObj.content) > 300 && parseInt(labelObj.content) <= 500) {  
                    markerObj.iconPath = '/static/images/dt_kq4.png'  
                } else {  
                    markerObj.iconPath = '/static/images/dt_kq4.png'  
                }  

                that.markers.push(markerObj);  
            })

操作步骤:

【报Bug】点击地图marker,label被遮盖。

预期结果:

不被遮盖

实际结果:

点击地图marker,label被遮盖。

bug描述:

【报Bug】点击地图marker,label被遮盖。

2023-03-13 17:58 负责人:无 分享
已邀请:

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