1.nvue 页面中 创建 map
2.在视野发生变化时 根据 let nmap = uni.createMapContext('map1', this); nmap.getRegion() 获取视图经纬度 然后在请求数据
3.数据请求到 markers 更新数据
4.点击markers 卡死
- 发布:2020-06-04 16:36
- 更新:2021-09-22 09:27
- 阅读:822
产品分类: uniapp/App
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: 10.15.4 (19E287)
HBuilderX类型: 正式
HBuilderX版本号: 2.7.9
手机系统: iOS
手机系统版本号: iOS 13.2
手机厂商: 苹果
手机机型: iPone 6s
页面类型: nvue
打包方式: 云端
项目创建方式: HBuilderX
操作步骤:
预期结果:
点击markers 触发 地图放大 根据scale获取 下一层级的数据
点击markers 触发 地图放大 根据scale获取 下一层级的数据
实际结果:
卡死
卡死
bug描述:
<view>
<map
style="width: 1500rpx; height: 2668rpx;"
ref="map1"
id="map1"
:latitude="latitude"
:longitude="longitude"
:scale="scale"
:markers="covers"
:circles="circles"
@callouttap="callouttap($event)"
@regionchange="regionchange"
></map>
</view>
</template>
export default {
data() {
return {
// longitude: '', //中心经度
// latitude: '', //中心纬度
latitude: 39.909,
longitude: 116.39742,
scale: 13, //缩放级别,取值范围为5-18
covers: [{
latitude: 39.909,
longitude: 116.39742,
iconPath: '../../static/logo.png',
width:80,
height:80,
title: "sss",
label: {
content: "ss",
color: '#ef0000',
x: -10,
y: -20,
bgColor: '#000',
textAlign: 'center',
padding:30,
},
}
], //标记点
controls: [], //控件
circles:[{
// latitude: 39.909,
// longitude: 116.39742,
// radius:10000,
// fillColor:"#3333333",
// color:'#3333333'
}],
northeast: {}, // 西南角 获取地图的
southwest: {}, //东北角获取地图的
northEast: '', //东北角坐标 接口参数
southWest: '', //西南角坐标
level: '', //地图层级(1:省、2:市、3:区、4:设备详情)
dxtCode: '', //设备类型编码(支持多选)
location: '', //安装位置
deviceName: '', //设备名称
identifier: '', //设备编号
deviceStatus: '' //设备状态
};
},
methods: {
callouttap(e) {
// 点击标记点对应的气泡时触发,e.detail = {markerId}
console.log(e)
},
regionchange(e) {
// 视野发生变化时触发
// console.log(e);
// if (e.type == 'end') {
let nmap = uni.createMapContext('map1', this);
nmap.getRegion({
success: res => {
console.log(res);
this.northeast = res.northeast;
this.southwest = res.southwest;
this.getMapListData();
},
fail: ress => {
// console.log(ress);
}
});
nmap.getScale({
success: res => {
// console.log(res);
console.log('-------1------');
this.scale = res.scale;
if (res.scale == 3 || res.scale == 4 || res.scale == 5 || res.scale == 6 || res.scale == 7) {
//判断地图层级 根据层级获取对应的数据
this.level = 1;
}
if (res.scale == 8 || res.scale == 9 || res.scale == 10 || res.scale == 11) {
this.level = 2;
}
if (res.scale == 12 || res.scale == 13 || res.scale == 14 || res.scale == 15) {
this.level = 3;
}
if (res.scale == 16 || res.scale == 17 || res.scale == 18) {
this.level = 4;
}
this.getMapListData();
}
});
// }
},
getMapListData() {
let por = {
// northeast: {}, // 西南角 获取地图的
// southwest: {}, //东北角获取地图的
southWest: this.southwest.longitude + ',' + this.southwest.latitude, //东北角坐标 接口参数
northEast:this.northeast.longitude + ',' + this.northeast.latitude, //西南角坐标
level: this.level, //地图层级(1:省、2:市、3:区、4:设备详情)
dxtCode: this.dxtCode, //设备类型编码(支持多选)
location: this.location, //安装位置
deviceName: this.deviceName, //设备名称
identifier: this.identifier, //设备编号
deviceStatus: this.deviceStatus //设备状态
};
console.log(por);
getMapList(por).then(res => {
console.log(res.data);
let listData = res.data;
if (listData.code == 200) {
// listData.result.dcountVoList
let Datas = listData.result.dcountVoList;
if (Datas) {
this.covers = [];
for (let i = 0; i < Datas.length; i++) {
this.covers.push({
latitude: Datas[i].latitude,
longitude: Datas[i].longitude,
iconPath: '../../static/logo.png',
title: Datas[i].deviceNum..toString(),
width:80,
height:80,
label: {
content: Datas[i].deviceNum.toString(),
color: '#ef0000',
x: -10,
y: -20,
bgColor: '#000000',
textAlign: 'center'
}
});
}
}
}
});
}
}
1 个回复
1***@qq.com
相同的问题,请问有解决的方案吗?