map组件,移动地图,刷新marker时遇到的问题
2216 浏览2023年06月26日作者:roadMouse

使用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);
				}
			},
最后一次编辑于 2023 年 06 月 26 日
4 条评论

相关问答

专题推荐

热门文章

热门问答