leaflet-uniapp 缩放地图的同时 显示当前缩放层级

本文介绍了如何在移动端地图应用中实现地图缩放级别的实时显示,通过L.Control.extend扩展功能,监听zoomstart和zoomzoomend事件,动态更新地图缩放级别信息。

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

记录实现过程:

需求为移动端用户在使用地图时,缩放地图的同时,可以获知地图此时缩放的级别。

效果图如下:此时缩放地图级别为13

map.on('') 有对应的诸多行为 查看官网即可,这里根据需要为--zoomstart zoom zoomend

代码如下:

// 地图缩放级别改变时
const ZoomViewer = L.Control.extend({
	options: {
	    position: 'bottomleft' //初始位置
	},
	onAdd() {
		const gauge = L.DomUtil.create('div');
		gauge.style.width = '30px';
		gauge.style.left = '3px';
		gauge.style.background = 'rgba(255,255,255,0.5)';
		gauge.style.textAlign = 'center';
		map.on('zoomstart zoom zoomend', (ev) => {
			gauge.innerHTML = `${map.getZoom().toFixed(0)}`;
		});
		return gauge;
	}
});
		 
const zoomViewer = (new ZoomViewer()).addTo(map);

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值