当前位置: 首页 > news >正文

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

记录实现过程:

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

效果图如下:此时缩放地图级别为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);

 

http://www.lryc.cn/news/113660.html

相关文章:

  • [Securinets CTF Quals 2023] Admin Service,ret2libc,One is enough
  • 计算机组成原理-笔记-第二章
  • mysql大量数据导入记要
  • 极狐GitLab 全新「价值流仪表盘」使用指南
  • 通过logrotate实现nginx容器内日志按天存储
  • 广东珠海电子行业导入MES系统需要注意什么
  • 小红书2023/08/06Java后端笔试 AK
  • 3、有序数组的平方
  • 用于自然语言处理 (NLP) 的 MLOps
  • C#抽象静态方法
  • 小研究 - Mysql快速全同步复制技术的设计和应用(一)
  • HTML <samp> 标签
  • C之(8)linux动态库编译框架
  • Zabbix网络拓扑配置
  • 2.4G芯片XL2408开发板,SOP16封装,芯片集成1T 8051内核单片机
  • iPhone苹果手机地震预警功能怎么开启?
  • Storm学习之使用官方Docker镜像快速搭建Storm运行环境
  • 【GTest学习】
  • [JAVAee]网络通信基础
  • 【HDFS】BlockManager#checkRedundancy方法详解
  • c++ 拷贝构造
  • MISRA 2012学习笔记(1)-Directives
  • 升级node版本后vue2的项目node-sass、sass-loader安装报错(14.x升级到16.x)
  • 深入理解CSS选择器:选择正确的方式掌控样式与布局
  • qt设置控件的风格样式
  • 简单易懂的Transformer学习笔记
  • C语言经典小游戏之三子棋(超详解释+源码)
  • 宝塔Linux面板点击SSL闪退打不开?怎么解决?
  • Problem: 6953. 判断是否能拆分数组
  • MobiSys 2023 | 多用户心跳监测的双重成形声学感知