uniapp小程序地图监听缩放层级-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp小程序地图监听缩放层级。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

uniapp监听地图缩放,uni-app,微信小程序

只用拖动地图时才会触发。我也没找到官方能监听地图缩放的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还是官方故意留的。 uniapp监听地图缩放,uni-app,微信小程序