使用uniapp开发字节小程序上,map组件,拖动地图或缩放地图时,会根据中心点获取新数据刷新marker,即清空原有marker后展示新marker,遇到的问题是:
1、IOS端,缩放地图刷新marker后,地图缩放会回到原来的层级。
2、安卓端,安卓端在移动地图获取新数据刷新marker过程中会特别的卡,多次拖动直接会卡死掉;缩放地图刷新marker后,地图缩放会回到原来的层级。
备注:①marker数据不变的情况下刷新也不会出现以上问题。②微信小程序两端都正常。
<map class="mapStyle" id="map" :latitude="latitude" :scale="scale" :min-scale="minScale" :max-scale="maxScale" :enable-satellite="enableSatellite"
:longitude="longitude" @regionchange="getCenterMap" :markers="markers" @markertap="markertap" @callouttap="markertap" show-location="true">
</map>getCenterMap(e) {
var eType = e.target.type;
if (eType == 'end') {
let _this = this
this.mapContext.getCenterLocation({
success: (res) => {
if (res.longitude != 0) {
_this.longitude = parseFloat(res.longitude)
_this.latitude = parseFloat(res.latitude)
// N秒内不向后台获取数据
var feeQueryTime = uni.getStorageSync("feeQueryTime") || 0;
var nowDate = new Date().getTime().toFixed();
if ((parseInt(nowDate) - parseInt(feeQueryTime)) >= this.queryInterval) {
// 获取我的路标列表
_this.getList();
uni.setStorageSync("feeQueryTime", nowDate);
}
}
}
})
}
},// 获取我的路标列表
getList() {
var url = 'xxxxxx';
uni.request({
url: url,
method: 'POST',
header: {'content-type': 'application/x-www-form-urlencoded'},
data: {
lng: this.longitude,
lat: this.latitude
},
success: res => {
this.markers.splice(0, this.markers.length);
this.list.splice(0, this.list.length);
if (res.data.code == 0 && res.data.positionList != undefined) {
this.list = res.data.positionList;
this.showMakers();
} else {
this.list.splice(0, this.list.length);
}
}
});
},// maker展示
showMakers() {
for (var i=0;i<this.list.length;i++) {
// aes解密坐标
var deLng = CryptoJS.Decrypt(this.list[i].lng);
var deLat = CryptoJS.Decrypt(this.list[i].lat);
var color = '#5053ff';
var borderColor = '#b0b5ff';
var bgColor = '#ddecf5';
var iconPath = '../../static/pointIcon-fish3.png';
var calloutContent = this.list[i].positionName;
var marker = {
id: this.list[i].positionId,
longitude: parseFloat(deLng),
latitude: parseFloat(deLat),
iconPath: iconPath,
width: 15,
height: 15,
ifBuy: this.list[i].ifBuy,
callout: {
content: calloutContent,
color: color,
borderWidth: 0.5,
borderColor: borderColor,
bgColor: bgColor,
fontSize: 10,
borderRadius: 5,
padding: 2,
display: "ALWAYS",
}
};
this.markers.push(marker);
}
},