uniapp小程序地图监听缩放层级

最新推荐文章于 2024-12-08 19:20:10 发布

Clc7

最新推荐文章于 2024-12-08 19:20:10 发布

阅读量2.5k

点赞数 4

文章标签： uni-app 微信小程序

文章讲述了在微信小程序中遇到的问题，即在地图上添加markers后，即使缩放到最大层级仍有大量图标显示。作者通过监听地图视野移动，使用定时器检查缩放级别，并在缩放超过特定阈值时动态添加或删除markers来优化显示。在微信开发工具中遇到了删除marker的显示异常，但在真机上表现正常。作者期待更好的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能需求是在地图上添加makers，但是就算缩放成最大层级，地图上还是会有那么一坨图标，看起来就很丑。。。

在官方看了文档只有监听地图视野移动的

只用拖动地图时才会触发。我也没找到官方能监听地图缩放的api所以只能用一个蠢方法去实现了。

首先获取地图对象的上下文，然后在data里复制。写一个定时器每500毫秒触发一次。地图对象有个getScale方法可以获取当前层级。

let _this=this
               let mapContext = uni.createMapContext("map", this);
               this.timer=setInterval(function(){
                   let scale= mapContext.getScale({
                       success(res) {
                           _this.zoom=res.scale
                       }
                   })

               },500)

之后在watch里监听这个zoom层级，然后声明一个值作为makers是否显示的判断，比如我写的是地图放大到16以上才会显示

	watch:{
			zoom(newVal,oldVal){
				let i=this.showMakerZoom //这是我在data里声明的缩放层级  这个i理解成16就行
				if(newVal>=i&&oldVal<i){
						this.addMakers()  //如果新的缩放层级大于16并且旧的缩放层级小于16就触发这个添加icon的方法
				}else if(newVal<i&&oldVal>=i){
					this.removerMakers() //如果新的缩放层级小于16并且旧的大于16就触发删除icon的方法
				}
			}
		},

对了还有个微信小程序的不知道是bug还是官方故意留的。