注册 登录
囿于江湖
囿于江湖
  • 发布：2021-08-20 20:04
  • 更新：2021-08-23 18:29
  • 阅读：1151

【报Bug】label定位在marker中心位置并出现在上方

分类：uni-app

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： Windows 10 企业版

HBuilderX类型： 正式

HBuilderX版本号： 3.1.18

手机系统： Android

手机系统版本号： Android 10

手机厂商： 华为

手机机型： 华为p20

页面类型： nvue

打包方式： 云端

项目创建方式： HBuilderX

App下载地址或H5⽹址： https://service.dcloud.net.cn/build/download/de6fb160-01a0-11ec-8178-f3baf54d1416 下载地址

示例代码： 
           switch(type) {  
                 case 1:  
                        this.covers.push({  
                            id:index+'',  
                            zIndex: index + 900,  
                            latitude: val.lat,  
                            width:40,  
                            height:40,  
                            // alpha:0.3,  
                            longitude: val.lng,  
                            iconPath: `/static/img/markers/06-${p.icon}.png`,  
                            label: { //marker气泡  
                                content: `${val.pm10}`,  
                                color: "#333",  
                                bgColor: `${p.color}`,  
                                borderWidth:100,  
                                borderRadius: 10,  
                                fontSize: 12,  
                                textAlign: "center",  
                                padding: padValue,  
                                 // 数字定位，放在中间  
                                x: -79,  
                                y: -103,  
                            },  
                            callout: { //marker气泡  
                                content: `名称：${val.name}\n统计时间：${val.date}\npm10：${val.pm10}`,  
                                color: "#fff",  
                                bgColor: "rgba(15, 158, 250, 1)",  
                                borderRadius: 10,  
                                fontSize: 12,  
                                textAlign: "left",  
                                padding: 6,  
                                display: 'BYCLICK',  
                            }  
                        })  
                   break;

操作步骤：

<template>
<view class="" style="height: 100%;">
<!-- <view class="page-section page-section-gap">
<barAndsearch @handleBadge="handleBadge"></barAndsearch>
</view> -->
<map v-if='!mapVis' :scale="scaleValue" :style="{width:'750rpx',height:windowHeight+'px'}" class="map-style" id="myMap" :latitude="latitude" :longitude="longitude" show-location @tap="tapVisPanel" @markertap="markertap">
</map>
<map v-if='mapVis' :scale="scaleValue" :style="{width:'750rpx',height:windowHeight+'px'}" class="map-style" id="myMap" :latitude="latitude" :longitude="longitude" :markers="covers" show-location @tap="tapVisPanel" @markertap="markertap">
</map>
</view>
</view>
</template>

<script>
var QQMapWX = require('../../../static/qqmap/qqmap-wx-jssdk.min.js');
var qqmapsdk;
var self;
import api from '@/api/platform.js';
import componentMixin from '@/mixins/componentMixin.js';
import onLoadMixin from '@/mixins/onLoadMixin.js';
//import barAndsearch from './barAndsearch.vue'
export default {
mixins: [onLoadMixin],
components: {
// barAndsearch
},
data() {
return {
mapVis:false,
data:[],
windowHeight: uni.getSystemInfoSync.windowHeight,
topValuePxP:'',
title:'站点分布',
IsOption:false,
searchKey:"",
scaleValue:10,
latitude: '',
longitude: '',
aaa:'',
fixedCovers:[],
covers: [],
pieces: [
{
value: '',
color: '#65789B',
label: '离线'
},
{
value: 0,
color: '#3399FF',
icon:'zero',
label: '0值'
},
{
gt: 0,
lte: 50,
icon:'excellent',
color: '#61DDAA',
label: '优'
},
{
gt: 50,
lte: 150,
icon:'good',
color: '#F6BD16',
label: '良'
},
{
gt: 150,
lte: 250,
icon:'mild',
color: '#F6903D',
label: '轻度'
},
{
gt: 250,
lte: 350,
icon:'med',
color: '#F46649',
label: '中度'
},
{
gt: 350,
lte: 420,
icon:'serious',
color: '#CE1118',
label: '重度'
},
{
gt: 420,
lte: 600,
icon:'severe',
color: '#8A0C10',
label: '严重'
}
],
}
},
onReady() {
},
onLoad(option) {
self = this
self.windowHeight = uni.getSystemInfoSync().windowHeight - 144;
uni.$on('popupPage', (data) => {
self.searchHandle(data.content)
})
uni.$on('clickTap', (data) => {
//self.mapScale = 14
// if(mapScale == 14){this. mapScale = 13.9}else{this. mapScale = 14}
self.tapOption(data.item)
})
uni.$on('handleBadge', (data) => {
self.handleMarker(data.index,data.colorValue)
})
self.mapCtx = wx.createMapContext('myMap')
self.getAuthorizeInfo()
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: 'ULWBZ-7D4WV-FNKPY-UOVE6-W4LO5-HCBD3'
});
uni.request({
method: 'get',
url: https://geoapi.qweather.com/v2/city/lookup?key=4badcc2f942c435e885ace18831fc8e8&location=${option.areaCode}
}).then(res => {
if(res[1].data.code === '200') {
this.latitude = res[1].data.location[0].lat;
this.longitude = res[1].data.location[0].lon;
}
})
this.getPageData(option.areaCode,option.areaType)
// let topValue = uni.getSystemInfoSync().statusBarHeight + 44
// let topValuePx = topValue + 'px'
// this.topValuePxP = topValuePx
// let subNvueMap = uni.getSubNVueById('searchAndBar');
// subNvueMap.setStyle({
// "position": "absolute",
// "top":topValue,
// "margin": topValue,
// "background": "transparent"
// })
},
//移除监听
onUnload() {
uni.$off('popupPage')
uni.$off('clickTap')
uni.$off('handleBadge')
},
watch: {
},
methods: {
bindChange:function(e){
console.log(e)
},
scaleValueHandle(){
this.scaleValue++
},
tapVisPanel(){
uni.$emit('tapVisPanel', {
})
},
markertap(val){ 

         },  
         // 获取页面数据  
         getPageData(areaCode,areaType) {  
                const p1 = new Promise((resolve, reject) => {  
                  api.getStations({ pointType: 0,areaCode:areaCode,areaType:areaType }).then(res => {  
                    resolve({ 'type': 1, 'res': res })  
                  })  
                })  
                const p2 = new Promise((resolve, reject) => {  
                  api.getStations({ pointType: 1 ,areaCode:areaCode,areaType:areaType}).then(res => {  
                    resolve({ 'type': 2, 'res': res })  
                  })  
                })  
                const p3 = new Promise((resolve, reject) => {  
                  api.getProjectStations({areaCode:areaCode,areaType:areaType}).then(res => {  
                    resolve({ 'type': 3, 'res': res })  
                  })  
                })  
                Promise.all([p1, p2, p3]).then((result) => {  
                  this.setMap(result)  
                }).catch((error) => {  
                  console.log(error)  
                })  
         },  
         showSubNuvue(){  
            // 根据id获取声明好的子页面  
            let subNvueMap = uni.getSubNVueById('searchAndBar');  
            subNvueMap.show('slide-in-bottom', 0)  
         },  
         setMap(result) {  
           this.mapVis =false  
           result.map(item => {  
             item.res.data.data.forEach((element,index) => {  
               this.setSign(item.type, element, index)  
             });  
           })  
           this.fixedCovers = this.covers  
           this.$nextTick(()=>{  
            this.mapVis =true  
           })  
          },  
         setSign(type, val, index) {  
           this.pieces.map(p => {  
             if(!val['pm10']) {  
               val['pm10'] = ''  
             }  
             if(val['pm10'] && ((val['pm10'] === p.value) || (p.gt <= val['pm10'] && val['pm10'] < p.lte && val['pm10'] !== ''))) {  
                 //let pm10Value = val.pm10 + ''  
                 let padValue = 6  
                 // if(pm10Value.length === 1){  
                    //  val.pm10 = val.pm10 + '.'  
                 // }  
                 // if(pm10Value.length === 3){  
                 //    val.pm10 = val.pm10 + ' '  
                    // padValue = 4  
                 // }  
                 // console.log(padValue)  
               switch(type) {  
                 case 1:  
                        this.covers.push({  
                            id:index+'',  
                            zIndex: index + 900,  
                            latitude: val.lat,  
                            width:40,  
                            height:40,  
                            // alpha:0.3,  
                            longitude: val.lng,  
                            iconPath: `/static/img/markers/06-${p.icon}.png`,  
                            label: { //marker气泡  
                                content: `${val.pm10}`,  
                                color: "#333",  
                                bgColor: `${p.color}`,  
                                borderWidth:100,  
                                borderRadius: 10,  
                                fontSize: 12,  
                                textAlign: "center",  
                                padding: padValue,  
                                 // 数字定位，放在中间  
                                x: -79,  
                                y: -103,  
                            },  
                            callout: { //marker气泡  
                                content: `名称：${val.name}\n统计时间：${val.date}\npm10：${val.pm10}`,  
                                color: "#fff",  
                                bgColor: "rgba(15, 158, 250, 1)",  
                                borderRadius: 10,  
                                fontSize: 12,  
                                textAlign: "left",  
                                padding: 6,  
                                display: 'BYCLICK',  
                            }  
                        })  
                   break;  
                 case 2:  
                   this.covers.push({  
                        id:index+'',  
                        zIndex: index + 900,  
                        latitude: val.lat,  
                        width:40,  
                        height:40,  
                        // alpha:0.3,  
                        longitude: val.lng,  
                        iconPath: `/static/img/markers/06-${p.icon}.png`,  
                        label: { //marker气泡  
                            content: `${val.pm10}`,  
                            color: "#333",  
                            bgColor: `${p.color}`,  
                            borderWidth:100,  
                            borderRadius: 10,  
                            fontSize: 12,  
                            textAlign: "center",  
                            padding: padValue,  
                             // 数字定位，放在中间  
                            x: -79,  
                            y: -103,  
                        },  
                        callout: { //marker气泡  
                            content: `名称：${val.name}\n统计时间：${val.date}\npm10：${val.pm10}`,  
                            color: "#fff",  
                            bgColor: "rgba(15, 158, 250, 1)",  
                            borderRadius: 10,  
                            fontSize: 12,  
                            textAlign: "left",  
                            padding: 6,  
                            display: 'BYCLICK',  
                        }  
                    })  
                   break;  
                 case 3:  
                   this.covers.push({  
                        id:index+'',  
                        zIndex: index + 900,  
                        latitude: val.lat,  
                        width:40,  
                        height:40,  
                        // alpha:0.3,  
                        longitude: val.lng,  
                        iconPath: `/static/img/markers/07-${p.icon}.png`,  
                        label: { //marker气泡  
                            content: `${val.pm10}`,  
                            color: "#333",  
                            bgColor:  `${p.color}`,  
                            borderWidth:90,  
                            borderRadius: 10,  
                            fontSize: 12,  
                            textAlign: "left",  
                            padding: 7,  
                             // 数字定位，放在中间  
                            x: -74,  
                            y: -96,  
                        },  
                        callout: { //marker气泡  
                            content: `名称：${val.name}\n统计时间：${val.date}\npm10：${val.pm10}`,  
                            color: "#fff",  
                            bgColor: "rgba(15, 158, 250, 1)",  
                            borderRadius: 10,  
                            fontSize: 12,  
                            textAlign: "center",  
                            padding: 5,  
                            display: 'BYCLICK',  
                        }  
                    })  
                   break;  
               }  
             }  
           })  
         },  
         //处理covers  
         handleMarker(val,colorValue){  
            this.mapVis = false  
             this.covers = this.fixedCovers.filter((item) => {  
                if(item.iconPath.indexOf('03') > -1 && colorValue['1']){  
                    return item  
                } else if(item.iconPath.indexOf('04') > -1 && colorValue['2']){  
                    return item  
                } else if(item.iconPath.indexOf('05') > -1 && colorValue['3']) {  
                    return item  
                }  
             });  
             this.$nextTick(()=>{  
                this.mapVis = true  
             })  
         },  
        // 搜索框  
          searchHandle(val){  
            // console.log(e)  
            let self = this  
            self.searchKey = val  
            //var location = self.latitude+","+ self.longitude  
             // self.mapSearch(self.searchKey,location).then(res => {  
                //      self.data = res.data  
                //      uni.$emit('popup-page2', {  
                //          data: res.data,  
                //      })  
                //      // if(self.searchKey && self.data.length){  
                //      //  self.IsOption = true  
                //      // }else{  
                //      //  self.IsOption = false  
                //      // }  

                //  },error => {  
                //      // self.$api.msg('请求失败')  
                //      // console.log(error,"aaaaaaaaaaa");  
                // })  
            self.getProjectNameList({projectName:self.searchKey})  

        },  
        getProjectNameList(val){  
            api.getProjectNameList(val).then(res=>{  
                this.aaa = res.data.data  
                uni.$emit('popup-page2', {  
                    data: res.data.data,  
                })  
            })  
        },  
        tapOption(item){  
            let self = this  
            self.searchKey = item.title  
            self.IsOption = false  
            self.data = []  
            var obj = {}  
            obj.latitude = item.lat;  
            obj.longitude = item.lng;  
            self.scaleValue = 18  
            // if(self.scaleValue == 14){  
            //  self.scaleValue = 13.9  
            // } else {  
            //  self.scaleValue = 14  
            // }  
            // obj.complete = ()=>{  
            //  // if(self.scaleValue == 14){  
            //  //  self.scaleValue = 13.9  
            //  // } else {  
            //  //  self.scaleValue = 14  
            //  // }  
            //  // if(mapScale == 14){self. mapScale = 13.9}else{self. mapScale = 14}  
            // }  
            // console.log(item,"danji",obj)  
            self.toLocation(obj)  
        },  
        toLocation:function(obj){  
            this.mapVis =false  
            self.mapCtx.moveToLocation(obj)  
            self.mapCtx.translateMarker({  
              markerId: 1,  
              autoRotate: true,  
              duration: 100,  
              destination: {  
                latitude:obj.latitude,  
                longitude:obj.longitude,  
              },  
              animationEnd() {  
                 // if(self.scaleValue == 18){  
                 //     self.scaleValue = 17.9  
                 // } else {  
                 //     self.scaleValue = 18  
                 // }  
              }  
            })  
            this.$nextTick(()=>{  
                if(self.scaleValue == 18){  
                    self.scaleValue = 17.9  
                } else {  
                    self.scaleValue = 18  
                }  
                self.latitude= obj.latitude,  
                self.longitude= obj.longitude,  
                this.mapVis =true  
            })  
        },  
        mapSearch:function(keyword,location){  
            console.log(keyword,location,"keyword,location")  
            let promise = new Promise(function(resolve, reject) {  
                // 调用接口  
                      qqmapsdk.search({  
                            keyword: keyword,//搜索关键词  
                            location:location ,  //设置周边搜索中心点  
                          success: function (res) {  
                              console.log(res)  
                             resolve(res)  
                          },  
                          fail: function (res) {  
                              console.log(12313)  
                              console.log(res)  
                             reject(res)  
                          }  
                  });  
            })  
            return promise  
        },  
        // 位置授权  
         getAuthorizeInfo(){  
                      // uni.authorize({  
                      //     scope: 'scope.userLocation',  
                      //     success() { // 允许授权  
                      //         self.getLocationInfo();  
                      //     },  
                      //     fail(){    // 拒绝授权  
                      //         self.openConfirm();  
                      //         console.log("你拒绝了授权，无法获得周边信息")  
                      //     }  
                      // })  
                  },  
                                  // 获取地理位置  
        getLocationInfo(){    
          uni.getLocation({  
              type: 'wgs84',  
              success (res) {  
                  console.log(res,"当前位置");  
                 self.toLocation(res)  
                 self.latitude = res.latitude;  
                 self.longitude = res.longitude;  
                // uni.openLocation({  
                //     latitude: latitude,  
                //     longitude: longitude,  
                //     success: function () {  
                //         console.log('success');  
                //     }  
                // })  
              }  
          });  
      },  
      // 再次获取授权  
      // 当用户第一次拒绝后再次请求授权  
        openConfirm(){  
                      uni.showModal({  
                          title: '请求授权当前位置',  
                          content: '需要获取您的地理位置，请确认授权',  
                          success: (res)=> {  
                              if (res.confirm) {  
                                  uni.openSetting();// 打开地图权限设置  
                              } else if (res.cancel) {  
                                  uni.showToast({  
                                      title: '你拒绝了授权，无法获得周边信息',  
                                      icon: 'none',  
                                      duration: 1000  
                                  })  
                              }  
                          }  
                      });  
         },  
         poitap: function(e){  
            console.log(e,"poitap")  
            var obj = e.detail  
            self.searchKey = obj.name  
            // this.$api.msg(e)  
            self.toLocation(obj)  
         },  
        getCenterLocation: function () {  
            this.mapCtx.getCenterLocation({  
              success: function(res){  
                console.log(res.longitude)  
                console.log(res.latitude)  
              }  
            })  
          }  
    }  
}

</script>
<style lang="less" scoped>
.top-search{
position: absolute;
top: 100px;
right: 10rpx;
z-index: 99999;
background-color: red;
}
map{
position:relative; 

}  
.btn-wrap{  
    position: absolute;  
    top: 180rpx;  
    left: 100rpx;  
    z-index: 99999;  
    background-color:red;  
}  
.map-style{  
    // height: calc(100vh - 44px);  
    // height: 100%;  
}  
  .controls-title {  
      position: relative;  
         margin-top: 350rpx;  
        width: 100%;  
        text-align: center;  
        color: red;  
    }  
    .bar-wrap{  
        width: 50rpx;  
        height: 50rpx;  
        background-color: red;  
    }

</style>

预期结果：

<template>
<view class="" style="height: 100%;">
<!-- <view class="page-section page-section-gap">
<barAndsearch @handleBadge="handleBadge"></barAndsearch>
</view> -->
<map v-if='!mapVis' :scale="scaleValue" :style="{width:'750rpx',height:windowHeight+'px'}" class="map-style" id="myMap" :latitude="latitude" :longitude="longitude" show-location @tap="tapVisPanel" @markertap="markertap">
</map>
<map v-if='mapVis' :scale="scaleValue" :style="{width:'750rpx',height:windowHeight+'px'}" class="map-style" id="myMap" :latitude="latitude" :longitude="longitude" :markers="covers" show-location @tap="tapVisPanel" @markertap="markertap">
</map>
</view>
</view>
</template>

<script>
var QQMapWX = require('../../../static/qqmap/qqmap-wx-jssdk.min.js');
var qqmapsdk;
var self;
import api from '@/api/platform.js';
import componentMixin from '@/mixins/componentMixin.js';
import onLoadMixin from '@/mixins/onLoadMixin.js';
//import barAndsearch from './barAndsearch.vue'
export default {
mixins: [onLoadMixin],
components: {
// barAndsearch
},
data() {
return {
mapVis:false,
data:[],
windowHeight: uni.getSystemInfoSync.windowHeight,
topValuePxP:'',
title:'站点分布',
IsOption:false,
searchKey:"",
scaleValue:10,
latitude: '',
longitude: '',
aaa:'',
fixedCovers:[],
covers: [],
pieces: [
{
value: '',
color: '#65789B',
label: '离线'
},
{
value: 0,
color: '#3399FF',
icon:'zero',
label: '0值'
},
{
gt: 0,
lte: 50,
icon:'excellent',
color: '#61DDAA',
label: '优'
},
{
gt: 50,
lte: 150,
icon:'good',
color: '#F6BD16',
label: '良'
},
{
gt: 150,
lte: 250,
icon:'mild',
color: '#F6903D',
label: '轻度'
},
{
gt: 250,
lte: 350,
icon:'med',
color: '#F46649',
label: '中度'
},
{
gt: 350,
lte: 420,
icon:'serious',
color: '#CE1118',
label: '重度'
},
{
gt: 420,
lte: 600,
icon:'severe',
color: '#8A0C10',
label: '严重'
}
],
}
},
onReady() {
},
onLoad(option) {
self = this
self.windowHeight = uni.getSystemInfoSync().windowHeight - 144;
uni.$on('popupPage', (data) => {
self.searchHandle(data.content)
})
uni.$on('clickTap', (data) => {
//self.mapScale = 14
// if(mapScale == 14){this. mapScale = 13.9}else{this. mapScale = 14}
self.tapOption(data.item)
})
uni.$on('handleBadge', (data) => {
self.handleMarker(data.index,data.colorValue)
})
self.mapCtx = wx.createMapContext('myMap')
self.getAuthorizeInfo()
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: 'ULWBZ-7D4WV-FNKPY-UOVE6-W4LO5-HCBD3'
});
uni.request({
method: 'get',
url: https://geoapi.qweather.com/v2/city/lookup?key=4badcc2f942c435e885ace18831fc8e8&location=${option.areaCode}
}).then(res => {
if(res[1].data.code === '200') {
this.latitude = res[1].data.location[0].lat;
this.longitude = res[1].data.location[0].lon;
}
})
this.getPageData(option.areaCode,option.areaType)
// let topValue = uni.getSystemInfoSync().statusBarHeight + 44
// let topValuePx = topValue + 'px'
// this.topValuePxP = topValuePx
// let subNvueMap = uni.getSubNVueById('searchAndBar');
// subNvueMap.setStyle({
// "position": "absolute",
// "top":topValue,
// "margin": topValue,
// "background": "transparent"
// })
},
//移除监听
onUnload() {
uni.$off('popupPage')
uni.$off('clickTap')
uni.$off('handleBadge')
},
watch: {
},
methods: {
bindChange:function(e){
console.log(e)
},
scaleValueHandle(){
this.scaleValue++
},
tapVisPanel(){
uni.$emit('tapVisPanel', {
})
},
markertap(val){ 

         },  
         // 获取页面数据  
         getPageData(areaCode,areaType) {  
                const p1 = new Promise((resolve, reject) => {  
                  api.getStations({ pointType: 0,areaCode:areaCode,areaType:areaType }).then(res => {  
                    resolve({ 'type': 1, 'res': res })  
                  })  
                })  
                const p2 = new Promise((resolve, reject) => {  
                  api.getStations({ pointType: 1 ,areaCode:areaCode,areaType:areaType}).then(res => {  
                    resolve({ 'type': 2, 'res': res })  
                  })  
                })  
                const p3 = new Promise((resolve, reject) => {  
                  api.getProjectStations({areaCode:areaCode,areaType:areaType}).then(res => {  
                    resolve({ 'type': 3, 'res': res })  
                  })  
                })  
                Promise.all([p1, p2, p3]).then((result) => {  
                  this.setMap(result)  
                }).catch((error) => {  
                  console.log(error)  
                })  
         },  
         showSubNuvue(){  
            // 根据id获取声明好的子页面  
            let subNvueMap = uni.getSubNVueById('searchAndBar');  
            subNvueMap.show('slide-in-bottom', 0)  
         },  
         setMap(result) {  
           this.mapVis =false  
           result.map(item => {  
             item.res.data.data.forEach((element,index) => {  
               this.setSign(item.type, element, index)  
             });  
           })  
           this.fixedCovers = this.covers  
           this.$nextTick(()=>{  
            this.mapVis =true  
           })  
          },  
         setSign(type, val, index) {  
           this.pieces.map(p => {  
             if(!val['pm10']) {  
               val['pm10'] = ''  
             }  
             if(val['pm10'] && ((val['pm10'] === p.value) || (p.gt <= val['pm10'] && val['pm10'] < p.lte && val['pm10'] !== ''))) {  
                 //let pm10Value = val.pm10 + ''  
                 let padValue = 6  
                 // if(pm10Value.length === 1){  
                    //  val.pm10 = val.pm10 + '.'  
                 // }  
                 // if(pm10Value.length === 3){  
                 //    val.pm10 = val.pm10 + ' '  
                    // padValue = 4  
                 // }  
                 // console.log(padValue)  
               switch(type) {  
                 case 1:  
                        this.covers.push({  
                            id:index+'',  
                            zIndex: index + 900,  
                            latitude: val.lat,  
                            width:40,  
                            height:40,  
                            // alpha:0.3,  
                            longitude: val.lng,  
                            iconPath: `/static/img/markers/06-${p.icon}.png`,  
                            label: { //marker气泡  
                                content: `${val.pm10}`,  
                                color: "#333",  
                                bgColor: `${p.color}`,  
                                borderWidth:100,  
                                borderRadius: 10,  
                                fontSize: 12,  
                                textAlign: "center",  
                                padding: padValue,  
                                 // 数字定位，放在中间  
                                x: -79,  
                                y: -103,  
                            },  
                            callout: { //marker气泡  
                                content: `名称：${val.name}\n统计时间：${val.date}\npm10：${val.pm10}`,  
                                color: "#fff",  
                                bgColor: "rgba(15, 158, 250, 1)",  
                                borderRadius: 10,  
                                fontSize: 12,  
                                textAlign: "left",  
                                padding: 6,  
                                display: 'BYCLICK',  
                            }  
                        })  
                   break;  
                 case 2:  
                   this.covers.push({  
                        id:index+'',  
                        zIndex: index + 900,  
                        latitude: val.lat,  
                        width:40,  
                        height:40,  
                        // alpha:0.3,  
                        longitude: val.lng,  
                        iconPath: `/static/img/markers/06-${p.icon}.png`,  
                        label: { //marker气泡  
                            content: `${val.pm10}`,  
                            color: "#333",  
                            bgColor: `${p.color}`,  
                            borderWidth:100,  
                            borderRadius: 10,  
                            fontSize: 12,  
                            textAlign: "center",  
                            padding: padValue,  
                             // 数字定位，放在中间  
                            x: -79,  
                            y: -103,  
                        },  
                        callout: { //marker气泡  
                            content: `名称：${val.name}\n统计时间：${val.date}\npm10：${val.pm10}`,  
                            color: "#fff",  
                            bgColor: "rgba(15, 158, 250, 1)",  
                            borderRadius: 10,  
                            fontSize: 12,  
                            textAlign: "left",  
                            padding: 6,  
                            display: 'BYCLICK',  
                        }  
                    })  
                   break;  
                 case 3:  
                   this.covers.push({  
                        id:index+'',  
                        zIndex: index + 900,  
                        latitude: val.lat,  
                        width:40,  
                        height:40,  
                        // alpha:0.3,  
                        longitude: val.lng,  
                        iconPath: `/static/img/markers/07-${p.icon}.png`,  
                        label: { //marker气泡  
                            content: `${val.pm10}`,  
                            color: "#333",  
                            bgColor:  `${p.color}`,  
                            borderWidth:90,  
                            borderRadius: 10,  
                            fontSize: 12,  
                            textAlign: "left",  
                            padding: 7,  
                             // 数字定位，放在中间  
                            x: -74,  
                            y: -96,  
                        },  
                        callout: { //marker气泡  
                            content: `名称：${val.name}\n统计时间：${val.date}\npm10：${val.pm10}`,  
                            color: "#fff",  
                            bgColor: "rgba(15, 158, 250, 1)",  
                            borderRadius: 10,  
                            fontSize: 12,  
                            textAlign: "center",  
                            padding: 5,  
                            display: 'BYCLICK',  
                        }  
                    })  
                   break;  
               }  
             }  
           })  
         },  
         //处理covers  
         handleMarker(val,colorValue){  
            this.mapVis = false  
             this.covers = this.fixedCovers.filter((item) => {  
                if(item.iconPath.indexOf('03') > -1 && colorValue['1']){  
                    return item  
                } else if(item.iconPath.indexOf('04') > -1 && colorValue['2']){  
                    return item  
                } else if(item.iconPath.indexOf('05') > -1 && colorValue['3']) {  
                    return item  
                }  
             });  
             this.$nextTick(()=>{  
                this.mapVis = true  
             })  
         },  
        // 搜索框  
          searchHandle(val){  
            // console.log(e)  
            let self = this  
            self.searchKey = val  
            //var location = self.latitude+","+ self.longitude  
             // self.mapSearch(self.searchKey,location).then(res => {  
                //      self.data = res.data  
                //      uni.$emit('popup-page2', {  
                //          data: res.data,  
                //      })  
                //      // if(self.searchKey && self.data.length){  
                //      //  self.IsOption = true  
                //      // }else{  
                //      //  self.IsOption = false  
                //      // }  

                //  },error => {  
                //      // self.$api.msg('请求失败')  
                //      // console.log(error,"aaaaaaaaaaa");  
                // })  
            self.getProjectNameList({projectName:self.searchKey})  

        },  
        getProjectNameList(val){  
            api.getProjectNameList(val).then(res=>{  
                this.aaa = res.data.data  
                uni.$emit('popup-page2', {  
                    data: res.data.data,  
                })  
            })  
        },  
        tapOption(item){  
            let self = this  
            self.searchKey = item.title  
            self.IsOption = false  
            self.data = []  
            var obj = {}  
            obj.latitude = item.lat;  
            obj.longitude = item.lng;  
            self.scaleValue = 18  
            // if(self.scaleValue == 14){  
            //  self.scaleValue = 13.9  
            // } else {  
            //  self.scaleValue = 14  
            // }  
            // obj.complete = ()=>{  
            //  // if(self.scaleValue == 14){  
            //  //  self.scaleValue = 13.9  
            //  // } else {  
            //  //  self.scaleValue = 14  
            //  // }  
            //  // if(mapScale == 14){self. mapScale = 13.9}else{self. mapScale = 14}  
            // }  
            // console.log(item,"danji",obj)  
            self.toLocation(obj)  
        },  
        toLocation:function(obj){  
            this.mapVis =false  
            self.mapCtx.moveToLocation(obj)  
            self.mapCtx.translateMarker({  
              markerId: 1,  
              autoRotate: true,  
              duration: 100,  
              destination: {  
                latitude:obj.latitude,  
                longitude:obj.longitude,  
              },  
              animationEnd() {  
                 // if(self.scaleValue == 18){  
                 //     self.scaleValue = 17.9  
                 // } else {  
                 //     self.scaleValue = 18  
                 // }  
              }  
            })  
            this.$nextTick(()=>{  
                if(self.scaleValue == 18){  
                    self.scaleValue = 17.9  
                } else {  
                    self.scaleValue = 18  
                }  
                self.latitude= obj.latitude,  
                self.longitude= obj.longitude,  
                this.mapVis =true  
            })  
        },  
        mapSearch:function(keyword,location){  
            console.log(keyword,location,"keyword,location")  
            let promise = new Promise(function(resolve, reject) {  
                // 调用接口  
                      qqmapsdk.search({  
                            keyword: keyword,//搜索关键词  
                            location:location ,  //设置周边搜索中心点  
                          success: function (res) {  
                              console.log(res)  
                             resolve(res)  
                          },  
                          fail: function (res) {  
                              console.log(12313)  
                              console.log(res)  
                             reject(res)  
                          }  
                  });  
            })  
            return promise  
        },  
        // 位置授权  
         getAuthorizeInfo(){  
                      // uni.authorize({  
                      //     scope: 'scope.userLocation',  
                      //     success() { // 允许授权  
                      //         self.getLocationInfo();  
                      //     },  
                      //     fail(){    // 拒绝授权  
                      //         self.openConfirm();  
                      //         console.log("你拒绝了授权，无法获得周边信息")  
                      //     }  
                      // })  
                  },  
                                  // 获取地理位置  
        getLocationInfo(){    
          uni.getLocation({  
              type: 'wgs84',  
              success (res) {  
                  console.log(res,"当前位置");  
                 self.toLocation(res)  
                 self.latitude = res.latitude;  
                 self.longitude = res.longitude;  
                // uni.openLocation({  
                //     latitude: latitude,  
                //     longitude: longitude,  
                //     success: function () {  
                //         console.log('success');  
                //     }  
                // })  
              }  
          });  
      },  
      // 再次获取授权  
      // 当用户第一次拒绝后再次请求授权  
        openConfirm(){  
                      uni.showModal({  
                          title: '请求授权当前位置',  
                          content: '需要获取您的地理位置，请确认授权',  
                          success: (res)=> {  
                              if (res.confirm) {  
                                  uni.openSetting();// 打开地图权限设置  
                              } else if (res.cancel) {  
                                  uni.showToast({  
                                      title: '你拒绝了授权，无法获得周边信息',  
                                      icon: 'none',  
                                      duration: 1000  
                                  })  
                              }  
                          }  
                      });  
         },  
         poitap: function(e){  
            console.log(e,"poitap")  
            var obj = e.detail  
            self.searchKey = obj.name  
            // this.$api.msg(e)  
            self.toLocation(obj)  
         },  
        getCenterLocation: function () {  
            this.mapCtx.getCenterLocation({  
              success: function(res){  
                console.log(res.longitude)  
                console.log(res.latitude)  
              }  
            })  
          }  
    }  
}

</script>
<style lang="less" scoped>
.top-search{
position: absolute;
top: 100px;
right: 10rpx;
z-index: 99999;
background-color: red;
}
map{
position:relative; 

}  
.btn-wrap{  
    position: absolute;  
    top: 180rpx;  
    left: 100rpx;  
    z-index: 99999;  
    background-color:red;  
}  
.map-style{  
    // height: calc(100vh - 44px);  
    // height: 100%;  
}  
  .controls-title {  
      position: relative;  
         margin-top: 350rpx;  
        width: 100%;  
        text-align: center;  
        color: red;  
    }  
    .bar-wrap{  
        width: 50rpx;  
        height: 50rpx;  
        background-color: red;  
    }

</style>

实际结果：

<template>
<view class="" style="height: 100%;">
<!-- <view class="page-section page-section-gap">
<barAndsearch @handleBadge="handleBadge"></barAndsearch>
</view> -->
<map v-if='!mapVis' :scale="scaleValue" :style="{width:'750rpx',height:windowHeight+'px'}" class="map-style" id="myMap" :latitude="latitude" :longitude="longitude" show-location @tap="tapVisPanel" @markertap="markertap">
</map>
<map v-if='mapVis' :scale="scaleValue" :style="{width:'750rpx',height:windowHeight+'px'}" class="map-style" id="myMap" :latitude="latitude" :longitude="longitude" :markers="covers" show-location @tap="tapVisPanel" @markertap="markertap">
</map>
</view>
</view>
</template>

<script>
var QQMapWX = require('../../../static/qqmap/qqmap-wx-jssdk.min.js');
var qqmapsdk;
var self;
import api from '@/api/platform.js';
import componentMixin from '@/mixins/componentMixin.js';
import onLoadMixin from '@/mixins/onLoadMixin.js';
//import barAndsearch from './barAndsearch.vue'
export default {
mixins: [onLoadMixin],
components: {
// barAndsearch
},
data() {
return {
mapVis:false,
data:[],
windowHeight: uni.getSystemInfoSync.windowHeight,
topValuePxP:'',
title:'站点分布',
IsOption:false,
searchKey:"",
scaleValue:10,
latitude: '',
longitude: '',
aaa:'',
fixedCovers:[],
covers: [],
pieces: [
{
value: '',
color: '#65789B',
label: '离线'
},
{
value: 0,
color: '#3399FF',
icon:'zero',
label: '0值'
},
{
gt: 0,
lte: 50,
icon:'excellent',
color: '#61DDAA',
label: '优'
},
{
gt: 50,
lte: 150,
icon:'good',
color: '#F6BD16',
label: '良'
},
{
gt: 150,
lte: 250,
icon:'mild',
color: '#F6903D',
label: '轻度'
},
{
gt: 250,
lte: 350,
icon:'med',
color: '#F46649',
label: '中度'
},
{
gt: 350,
lte: 420,
icon:'serious',
color: '#CE1118',
label: '重度'
},
{
gt: 420,
lte: 600,
icon:'severe',
color: '#8A0C10',
label: '严重'
}
],
}
},
onReady() {
},
onLoad(option) {
self = this
self.windowHeight = uni.getSystemInfoSync().windowHeight - 144;
uni.$on('popupPage', (data) => {
self.searchHandle(data.content)
})
uni.$on('clickTap', (data) => {
//self.mapScale = 14
// if(mapScale == 14){this. mapScale = 13.9}else{this. mapScale = 14}
self.tapOption(data.item)
})
uni.$on('handleBadge', (data) => {
self.handleMarker(data.index,data.colorValue)
})
self.mapCtx = wx.createMapContext('myMap')
self.getAuthorizeInfo()
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: 'ULWBZ-7D4WV-FNKPY-UOVE6-W4LO5-HCBD3'
});
uni.request({
method: 'get',
url: https://geoapi.qweather.com/v2/city/lookup?key=4badcc2f942c435e885ace18831fc8e8&location=${option.areaCode}
}).then(res => {
if(res[1].data.code === '200') {
this.latitude = res[1].data.location[0].lat;
this.longitude = res[1].data.location[0].lon;
}
})
this.getPageData(option.areaCode,option.areaType)
// let topValue = uni.getSystemInfoSync().statusBarHeight + 44
// let topValuePx = topValue + 'px'
// this.topValuePxP = topValuePx
// let subNvueMap = uni.getSubNVueById('searchAndBar');
// subNvueMap.setStyle({
// "position": "absolute",
// "top":topValue,
// "margin": topValue,
// "background": "transparent"
// })
},
//移除监听
onUnload() {
uni.$off('popupPage')
uni.$off('clickTap')
uni.$off('handleBadge')
},
watch: {
},
methods: {
bindChange:function(e){
console.log(e)
},
scaleValueHandle(){
this.scaleValue++
},
tapVisPanel(){
uni.$emit('tapVisPanel', {
})
},
markertap(val){ 

         },  
         // 获取页面数据  
         getPageData(areaCode,areaType) {  
                const p1 = new Promise((resolve, reject) => {  
                  api.getStations({ pointType: 0,areaCode:areaCode,areaType:areaType }).then(res => {  
                    resolve({ 'type': 1, 'res': res })  
                  })  
                })  
                const p2 = new Promise((resolve, reject) => {  
                  api.getStations({ pointType: 1 ,areaCode:areaCode,areaType:areaType}).then(res => {  
                    resolve({ 'type': 2, 'res': res })  
                  })  
                })  
                const p3 = new Promise((resolve, reject) => {  
                  api.getProjectStations({areaCode:areaCode,areaType:areaType}).then(res => {  
                    resolve({ 'type': 3, 'res': res })  
                  })  
                })  
                Promise.all([p1, p2, p3]).then((result) => {  
                  this.setMap(result)  
                }).catch((error) => {  
                  console.log(error)  
                })  
         },  
         showSubNuvue(){  
            // 根据id获取声明好的子页面  
            let subNvueMap = uni.getSubNVueById('searchAndBar');  
            subNvueMap.show('slide-in-bottom', 0)  
         },  
         setMap(result) {  
           this.mapVis =false  
           result.map(item => {  
             item.res.data.data.forEach((element,index) => {  
               this.setSign(item.type, element, index)  
             });  
           })  
           this.fixedCovers = this.covers  
           this.$nextTick(()=>{  
            this.mapVis =true  
           })  
          },  
         setSign(type, val, index) {  
           this.pieces.map(p => {  
             if(!val['pm10']) {  
               val['pm10'] = ''  
             }  
             if(val['pm10'] && ((val['pm10'] === p.value) || (p.gt <= val['pm10'] && val['pm10'] < p.lte && val['pm10'] !== ''))) {  
                 //let pm10Value = val.pm10 + ''  
                 let padValue = 6  
                 // if(pm10Value.length === 1){  
                    //  val.pm10 = val.pm10 + '.'  
                 // }  
                 // if(pm10Value.length === 3){  
                 //    val.pm10 = val.pm10 + ' '  
                    // padValue = 4  
                 // }  
                 // console.log(padValue)  
               switch(type) {  
                 case 1:  
                        this.covers.push({  
                            id:index+'',  
                            zIndex: index + 900,  
                            latitude: val.lat,  
                            width:40,  
                            height:40,  
                            // alpha:0.3,  
                            longitude: val.lng,  
                            iconPath: `/static/img/markers/06-${p.icon}.png`,  
                            label: { //marker气泡  
                                content: `${val.pm10}`,  
                                color: "#333",  
                                bgColor: `${p.color}`,  
                                borderWidth:100,  
                                borderRadius: 10,  
                                fontSize: 12,  
                                textAlign: "center",  
                                padding: padValue,  
                                 // 数字定位，放在中间  
                                x: -79,  
                                y: -103,  
                            },  
                            callout: { //marker气泡  
                                content: `名称：${val.name}\n统计时间：${val.date}\npm10：${val.pm10}`,  
                                color: "#fff",  
                                bgColor: "rgba(15, 158, 250, 1)",  
                                borderRadius: 10,  
                                fontSize: 12,  
                                textAlign: "left",  
                                padding: 6,  
                                display: 'BYCLICK',  
                            }  
                        })  
                   break;  
                 case 2:  
                   this.covers.push({  
                        id:index+'',  
                        zIndex: index + 900,  
                        latitude: val.lat,  
                        width:40,  
                        height:40,  
                        // alpha:0.3,  
                        longitude: val.lng,  
                        iconPath: `/static/img/markers/06-${p.icon}.png`,  
                        label: { //marker气泡  
                            content: `${val.pm10}`,  
                            color: "#333",  
                            bgColor: `${p.color}`,  
                            borderWidth:100,  
                            borderRadius: 10,  
                            fontSize: 12,  
                            textAlign: "center",  
                            padding: padValue,  
                             // 数字定位，放在中间  
                            x: -79,  
                            y: -103,  
                        },  
                        callout: { //marker气泡  
                            content: `名称：${val.name}\n统计时间：${val.date}\npm10：${val.pm10}`,  
                            color: "#fff",  
                            bgColor: "rgba(15, 158, 250, 1)",  
                            borderRadius: 10,  
                            fontSize: 12,  
                            textAlign: "left",  
                            padding: 6,  
                            display: 'BYCLICK',  
                        }  
                    })  
                   break;  
                 case 3:  
                   this.covers.push({  
                        id:index+'',  
                        zIndex: index + 900,  
                        latitude: val.lat,  
                        width:40,  
                        height:40,  
                        // alpha:0.3,  
                        longitude: val.lng,  
                        iconPath: `/static/img/markers/07-${p.icon}.png`,  
                        label: { //marker气泡  
                            content: `${val.pm10}`,  
                            color: "#333",  
                            bgColor:  `${p.color}`,  
                            borderWidth:90,  
                            borderRadius: 10,  
                            fontSize: 12,  
                            textAlign: "left",  
                            padding: 7,  
                             // 数字定位，放在中间  
                            x: -74,  
                            y: -96,  
                        },  
                        callout: { //marker气泡  
                            content: `名称：${val.name}\n统计时间：${val.date}\npm10：${val.pm10}`,  
                            color: "#fff",  
                            bgColor: "rgba(15, 158, 250, 1)",  
                            borderRadius: 10,  
                            fontSize: 12,  
                            textAlign: "center",  
                            padding: 5,  
                            display: 'BYCLICK',  
                        }  
                    })  
                   break;  
               }  
             }  
           })  
         },  
         //处理covers  
         handleMarker(val,colorValue){  
            this.mapVis = false  
             this.covers = this.fixedCovers.filter((item) => {  
                if(item.iconPath.indexOf('03') > -1 && colorValue['1']){  
                    return item  
                } else if(item.iconPath.indexOf('04') > -1 && colorValue['2']){  
                    return item  
                } else if(item.iconPath.indexOf('05') > -1 && colorValue['3']) {  
                    return item  
                }  
             });  
             this.$nextTick(()=>{  
                this.mapVis = true  
             })  
         },  
        // 搜索框  
          searchHandle(val){  
            // console.log(e)  
            let self = this  
            self.searchKey = val  
            //var location = self.latitude+","+ self.longitude  
             // self.mapSearch(self.searchKey,location).then(res => {  
                //      self.data = res.data  
                //      uni.$emit('popup-page2', {  
                //          data: res.data,  
                //      })  
                //      // if(self.searchKey && self.data.length){  
                //      //  self.IsOption = true  
                //      // }else{  
                //      //  self.IsOption = false  
                //      // }  

                //  },error => {  
                //      // self.$api.msg('请求失败')  
                //      // console.log(error,"aaaaaaaaaaa");  
                // })  
            self.getProjectNameList({projectName:self.searchKey})  

        },  
        getProjectNameList(val){  
            api.getProjectNameList(val).then(res=>{  
                this.aaa = res.data.data  
                uni.$emit('popup-page2', {  
                    data: res.data.data,  
                })  
            })  
        },  
        tapOption(item){  
            let self = this  
            self.searchKey = item.title  
            self.IsOption = false  
            self.data = []  
            var obj = {}  
            obj.latitude = item.lat;  
            obj.longitude = item.lng;  
            self.scaleValue = 18  
            // if(self.scaleValue == 14){  
            //  self.scaleValue = 13.9  
            // } else {  
            //  self.scaleValue = 14  
            // }  
            // obj.complete = ()=>{  
            //  // if(self.scaleValue == 14){  
            //  //  self.scaleValue = 13.9  
            //  // } else {  
            //  //  self.scaleValue = 14  
            //  // }  
            //  // if(mapScale == 14){self. mapScale = 13.9}else{self. mapScale = 14}  
            // }  
            // console.log(item,"danji",obj)  
            self.toLocation(obj)  
        },  
        toLocation:function(obj){  
            this.mapVis =false  
            self.mapCtx.moveToLocation(obj)  
            self.mapCtx.translateMarker({  
              markerId: 1,  
              autoRotate: true,  
              duration: 100,  
              destination: {  
                latitude:obj.latitude,  
                longitude:obj.longitude,  
              },  
              animationEnd() {  
                 // if(self.scaleValue == 18){  
                 //     self.scaleValue = 17.9  
                 // } else {  
                 //     self.scaleValue = 18  
                 // }  
              }  
            })  
            this.$nextTick(()=>{  
                if(self.scaleValue == 18){  
                    self.scaleValue = 17.9  
                } else {  
                    self.scaleValue = 18  
                }  
                self.latitude= obj.latitude,  
                self.longitude= obj.longitude,  
                this.mapVis =true  
            })  
        },  
        mapSearch:function(keyword,location){  
            console.log(keyword,location,"keyword,location")  
            let promise = new Promise(function(resolve, reject) {  
                // 调用接口  
                      qqmapsdk.search({  
                            keyword: keyword,//搜索关键词  
                            location:location ,  //设置周边搜索中心点  
                          success: function (res) {  
                              console.log(res)  
                             resolve(res)  
                          },  
                          fail: function (res) {  
                              console.log(12313)  
                              console.log(res)  
                             reject(res)  
                          }  
                  });  
            })  
            return promise  
        },  
        // 位置授权  
         getAuthorizeInfo(){  
                      // uni.authorize({  
                      //     scope: 'scope.userLocation',  
                      //     success() { // 允许授权  
                      //         self.getLocationInfo();  
                      //     },  
                      //     fail(){    // 拒绝授权  
                      //         self.openConfirm();  
                      //         console.log("你拒绝了授权，无法获得周边信息")  
                      //     }  
                      // })  
                  },  
                                  // 获取地理位置  
        getLocationInfo(){    
          uni.getLocation({  
              type: 'wgs84',  
              success (res) {  
                  console.log(res,"当前位置");  
                 self.toLocation(res)  
                 self.latitude = res.latitude;  
                 self.longitude = res.longitude;  
                // uni.openLocation({  
                //     latitude: latitude,  
                //     longitude: longitude,  
                //     success: function () {  
                //         console.log('success');  
                //     }  
                // })  
              }  
          });  
      },  
      // 再次获取授权  
      // 当用户第一次拒绝后再次请求授权  
        openConfirm(){  
                      uni.showModal({  
                          title: '请求授权当前位置',  
                          content: '需要获取您的地理位置，请确认授权',  
                          success: (res)=> {  
                              if (res.confirm) {  
                                  uni.openSetting();// 打开地图权限设置  
                              } else if (res.cancel) {  
                                  uni.showToast({  
                                      title: '你拒绝了授权，无法获得周边信息',  
                                      icon: 'none',  
                                      duration: 1000  
                                  })  
                              }  
                          }  
                      });  
         },  
         poitap: function(e){  
            console.log(e,"poitap")  
            var obj = e.detail  
            self.searchKey = obj.name  
            // this.$api.msg(e)  
            self.toLocation(obj)  
         },  
        getCenterLocation: function () {  
            this.mapCtx.getCenterLocation({  
              success: function(res){  
                console.log(res.longitude)  
                console.log(res.latitude)  
              }  
            })  
          }  
    }  
}

</script>
<style lang="less" scoped>
.top-search{
position: absolute;
top: 100px;
right: 10rpx;
z-index: 99999;
background-color: red;
}
map{
position:relative; 

}  
.btn-wrap{  
    position: absolute;  
    top: 180rpx;  
    left: 100rpx;  
    z-index: 99999;  
    background-color:red;  
}  
.map-style{  
    // height: calc(100vh - 44px);  
    // height: 100%;  
}  
  .controls-title {  
      position: relative;  
         margin-top: 350rpx;  
        width: 100%;  
        text-align: center;  
        color: red;  
    }  
    .bar-wrap{  
        width: 50rpx;  
        height: 50rpx;  
        background-color: red;  
    }

</style>

bug描述：

nvue页面使用label得x，y定位后不能适配所有手机 x,y不是用得upx定位

2021-08-20 20:04 负责人:无 分享

没有找到相关结果

    已邀请:

    最佳回复

    DCloud_Android_ST

    DCloud_Android_ST

    设置label的宽高 然后在设置xy 举例:label: {
    content: 11,
    fontSize: 20,
    width: 60,
    height: 60,
    bgColor: '#00ff00',
    borderRadius: 30,
    textAlign: 'center',
    x: 0,
    y: -30,
    }

    2021-08-23 18:28 分享
    评论 取消
    囿于江湖

    囿于江湖 (作者)

    demo 直接运行进去首页

    2021-08-23 15:41 分享

    • DCloud_Android_ST

      demo运行不起来 弄个简单demo重新提交一下

      2021-08-23 17:06

    评论 取消
    囿于江湖

    囿于江湖 (作者)

    有没有哪位大佬再看 我们这边客户一直在催

    2021-08-23 16:14 分享
    囿于江湖

    囿于江湖 (作者)

    手机这里我用得是p20调试得 这个调试好了 但是其他手机不适配

    2021-08-23 16:23 分享
    DCloud_Android_ST

    DCloud_Android_ST

    x y本身就是逻辑像素了 理论上不会相差很大。不同手机偏差很大？

    2021-08-23 16:59 分享

    • 囿于江湖 (作者)

      很大 我是按p20调试出来的x,y 比p20小得手机在右下方 还挺多得，比p20屏幕大得手机 左上方 距离挺远得 逻辑上来说 不设置应该喝 经纬度在一起呢

      2021-08-23 17:02

    • DCloud_Android_ST

      回复 囿于江湖: 设置label的宽高 然后在设置xy 举例:label: {

      content: markerIds.length + '',

      fontSize: 20,

      width: 60,

      height: 60,

      bgColor: '#00ff00',

      borderRadius: 30,

      textAlign: 'center',

      x: 0,

      y: -30,

      }

      2021-08-23 17:24

    评论 取消
    囿于江湖

    囿于江湖 (作者)

    你需要连接到手机上 我这个进去第一个页面就是nvue

    2021-08-23 17:43 分享
    为什么被折叠? 0 个回复被折叠

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

    退出全屏模式 全屏模式 回复
    友情链接
    优势智云 黑马程序员 程序员客栈 个推 锐亚教育 即速应用 DCloud新闻 InfoQ 蓝莺IM HeapDump性能社区 diygw可视化 申请友链

    DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位

    京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001

    | | 违法违规信息举报