5***@qq.com
5***@qq.com
  • 发布:2023-02-09 08:45
  • 更新:2023-02-09 17:46
  • 阅读:181

【报Bug】nuve下map的配置不生效

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.6.18

手机系统: Android

手机系统版本号: Android 11

手机厂商: 小米

手机机型: 小米10

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template> <div > <map style="height: calc(100vh - 53px);width: 100vw;" longitude="mapOption.longitude" latitude="mapOption.latitude" scale="mapOption.scale"

markers="pointMarkerList" @markertap = "markertap"
v-if="!showModal"

</map>  

<!-- <myMap/> -->  
<div class="cu-load load-modal" v-if="loading">  
    <div class="gray-text">加载中...</div>  
</div>  
<div class="cu-modal bottom-modal" :class="showModal?'show':''" >  
    <div scroll-y="true" class=" cu-dialog" style="height: calc(100vh - 30px);">  
        <pointDataDetail :devInfo='currentSelectPoint' @closePointDataModal="closePointDataModal"></pointDataDetail>  
    </div>  
</div>  

</div>
</template>

<script>

import {XUANMU_DEV_TYPE} from '@/common/util/bizConstants.js'  
import pointDataDetail from './pointDataDetail.vue';  
export default {  
    components:{  

       pointDataDetail  
    },  
    name: "onemapnvue",  
    data() {  
        return {  
            currentSelectPoint:null,  
            mapOption:{  
                longitude:120.752512,  
                latitude:31.656016,  
                scale:13  
            },  
            pointMarkerList:[],  
            mapPointLastData:[],  
            pointCount :{  
                devType1Count:0,  
                devType2Count:0,  
                devType3Count:0,  
                devType4Count:0  
            },  
            pointTypeList:{  
                devType1List:[],  
                devType2List:[],  
                devType3List:[],  
                devType4List:[]  
            },  
            aaa:"我wo wo wo wo wow wo ",  
            loading:true,  
            showModal:false,  
            url:{  
                mapPointLastData:"/lastdata/xuanmuLastData/mapPointLastData"  
            }  
        };  
    },  
    created() {  
        this.getPointLastData();  
    },  
    methods:{  
        closePointDataModal(){  
            this.showModal=false;  
        },  
        markertap(e){  
            let markerId = e.detail.markerId;//此处markerId由于数据原因,存放的是设备编号deviceno  
            console.log(markerId);  
            let pointData =this.getPointFromMapPointLastDataByDeviceno(markerId)[0];  
            if(pointData!=null){  
                this.currentSelectPoint  =pointData;  
                this.showModal = true;  
            }  
        },  
        getPointFromMapPointLastDataByDeviceno(deviceno){  
            return this.mapPointLastData.filter(function(item) {   
                return item.deviceno ==deviceno  
            });  

        },  
        getPointLastData(){  
            let params = {};  
            this.$http.get(this.url.mapPointLastData,params).then(res=>{  
                if(res.data.success){  
                    this.mapPointLastData = res.data.result;  
                    this.showPoint();  
                }else{  
                    this.$tip.error(res.message)  
                }  
               this.loading = false  
            }).catch(()=>{  
                this.loading = false  
            });  
        },  
        showPoint(){  
            this.resetPointData();  
            this.dealMapPointLastData();  
        },  

        dealMapPointLastData(){  
            let that = this;  
            for(let i=0;i<this.mapPointLastData.length;i++){  
                let pointData  =this.mapPointLastData[i];  
                if(pointData.xuanmuDevType == XUANMU_DEV_TYPE.YA_LI) {  
                    that.pointCount.devType1Count += 1  
                    that.pointTypeList.devType1List.push(pointData)  
                } else if (pointData.xuanmuDevType == XUANMU_DEV_TYPE.FA_MEN) {  
                    that.pointCount.devType2Count += 1  
                    that.pointTypeList.devType2List.push(pointData)  
                } else if (pointData.xuanmuDevType == XUANMU_DEV_TYPE.JING_GAI) {  
                    that.pointCount.devType3Count += 1  
                    that.pointTypeList.devType3List.push(pointData)  
                } else if (pointData.xuanmuDevType == XUANMU_DEV_TYPE.XIAO_HUO_SHUAN) {  
                    that.pointCount.devType4Count += 1  
                    that.pointTypeList.devType4List.push(pointData)  
                }  
                let imagename = this.getPointDevImage(pointData);  
                let showDataStr  =that.formatShowData(pointData);  

                let pointMarker  = {  
                    id:parseInt(pointData.deviceno),  
                    latitude:pointData.lat,  
                    longitude:pointData.lng,  
                    title:"我是title",  
                    iconPath:`/static/devimg/${imagename}`,  
                    width:20,  
                    heigth:20,  
label:{//为标记点旁边增加标签  
                                 content:showDataStr,//文本  
     color:'#123456',//文本颜色  
                                  fontSize:14,//文字大小  
                                   borderWidth:2,//边框宽度  
                                   borderColor:'#000000',//边框颜色   
                                   bgColor:'#000000',//背景颜色  
                                  borderRadius:12,//边框圆角    
                                  padding:5,//文本边缘留白  
                                   textAlign:'center',//文本对齐方式  
                                   x:0,//label的坐标,原点是 marker 对应的经纬度  
                                   y:0,//label的坐标,原点是 marker 对应的经纬度   
                                },   
                    callout:{//自定义标记点上方的气泡窗口 点击有效  
                        content:showDataStr,//文本  
                        color:'#ffffff',//文字颜色  
                        fontSize:1,//文本大小  
                        borderRadius:10,//边框圆角  
                        bgColor:'#123456',//背景颜色  
                        display:'ALWAYS'//常显  
                    }  

                }  
                this.pointMarkerList.push(pointMarker);  
            }  
            console.log(this.pointMarkerList);  
        },  
        formatShowData(pointData){  
            let returnDataStr = "暂无数据";  
            let xuanmuDevType = pointData.xuanmuDevType  
            let dataValue = "";  
            if (xuanmuDevType == XUANMU_DEV_TYPE.YA_LI) {  
                dataValue = pointData.pressureKpa  
                if (dataValue != null && dataValue!='') {  

                    returnDataStr = `${dataValue} Kpa`  
                }  
            }  
            return returnDataStr;  

        },  
       getPointDevImage(pointData) {  
          let devType = pointData.xuanmuDevType  
          let pointName = pointData.pointName  
          let warnType = pointData.warnType  
          let xuanmuDevType = pointData.xuanmuDevType  
          let imagename = ''  
          //判断设备类型  
          if (xuanmuDevType == '1') {  
            imagename += 'yl'  
          } else if (xuanmuDevType == '2') {  
            imagename += 'fm'  
          } else if (xuanmuDevType == '3') {  
            imagename += 'jg'  
          } else if (xuanmuDevType == '4') {  
            imagename += ''  
          }  
          imagename += '-green'  
          if (warnType != null) {  
            if (warnType.length > 0) {  
              imagename += '-red'  
              if (warnType.indexOf('1') >= 0) {  
                imagename += '-low'  
              }  
            }  
          }  

          imagename += '.png'  
          return imagename  

        },  
        resetPointData(){  
            this.pointMarkerList = [];  
        }  
    }  
}  

</script>

<style>

</style>

操作步骤:

正常操作

预期结果:

出现气泡

实际结果:

未出现气泡

bug描述:

map组件的callout属性,差异写的是
“App-nvue 2.1.5+、微信小程序、支付宝小程序、百度小程序、京东小程序”
我用nvue页面编写后,这个气泡还是不显示
(H5上没问题)
第一张图的地图显示的是那种样式的气泡,app上则无任何信息(下方显示的数据是label配置)

2023-02-09 08:45 负责人:无 分享
已邀请:
亦春亦秋

亦春亦秋 - 用爱发电

先试一下,在app内,自定义数据,展示一下气泡,看看能否出现。

  • 5***@qq.com (作者)

    样式在下面,就是我有一个vue文件,一个nuve,2者在app的表现是一模一样的

    2023-02-09 15:59

5***@qq.com

5***@qq.com (作者)

就是这样,样式看上去跟vue文件的没区别,但是我文件确实是nvue,且在pages.json注册过

5***@qq.com

5***@qq.com (作者)

最明显的就是这个api
uni.getLocation({
geocode: true,
type: 'gcj02',
success: (res) => {
this.latitude = res.latitude;
this.longitude = res.longitude;
console.log(this.latitude);
console.log(this.longitude);

                    this.toMapAPP();  
                }  
            })  
                geocode: true,  
                type: 'gcj02',  

这2个参数是说只有app-nuve才支持,但是我有这2个参数就无法获得地址,去掉这2个参数后就可以正常获取

要回复问题请先登录注册