囿于江湖
囿于江湖
  • 发布:2021-08-20 20:04
  • 更新:2021-08-23 18:29
  • 阅读:843

【报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,
}

囿于江湖

囿于江湖 (作者)

demo 直接运行进去首页

  • DCloud_Android_ST

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


    2021-08-23 17:06

囿于江湖

囿于江湖 (作者)

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

囿于江湖

囿于江湖 (作者)

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

DCloud_Android_ST

DCloud_Android_ST

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

  • 囿于江湖 (作者)

    很大 我是按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

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