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.mzph.cn/news/24742.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Crowd-Robot Interaction 论文阅读

论文信息 题目:Crowd-Robot Interaction:Crowd-aware Robot Navigation with Attention-based Deep Reinforcement Learning 作者:Changan Chen, Y uejiang Liu 代码地址:https://github.com/vita-epfl/CrowdNav 来源:arXiv 时间…

【Linux】网络套接字知识点补足

目录 1 地址转换函数 1.1 字符串转in_addr的函数: 1.2 in_addr转字符串的函数: 1.3 关于inet_ntoa 2 TCP协议通讯流程 1 地址转换函数 本节只介绍基于IPv4的socket网络编程,sockaddr_in中的成员struct in_addr sin_addr表示32位 的IP 地址但是我们通常用点分十进制的字符串…

无涯教程-Perl - bind函数

描述 此功能将网络地址绑定到由SOCKET标识的文件句柄。地址应该是用于打开的Socket的适当类型的打包地址。 语法 以下是此函数的简单语法- bind SOCKET, ADDRESS 返回值 如果失败,此函数返回0,如果成功,则返回1。 Perl 中的 bind函数 - 无涯教程网无涯教程网提供描述此功能…

day52-Redis

Redis 1.Redis 1.1 RESP连接Redis 1.2 定义:是一个高性能的key-value数据库(非关系型数据库) 1.3 数据类型: key键的类型是字符串类型; 值的类型有五种:字符串String,哈希hash&#xff0…

pygame贪吃蛇游戏

pygame贪吃蛇游戏 贪吃蛇游戏通过enter键启动,贪吃蛇通过WSAD进行上下左右移动,每次在游戏区域中随机生成一个食物,每次吃完食物后,蛇变长并且获得积分;按空格键暂停。 贪吃蛇 import random, sys, time, pygame from …

AR远程专家指导在汽车改装上的应用有哪些?

随着科技的不断发展,AR增强现实技术逐渐走进了我们的生活。加上商贸国际化,远程协同纵深到制造生产的更多环节,研发协同、工艺优化等场景复杂、跨层级、需要频繁沟通确认的流程正通过AR应用实现全面远程化的过渡,在汽车行业&#…

JVM入门到精通

一、JVM概念 1.1、什么是JVM Java Virtual Machine:Java虚拟机,用来保证Java语言跨平台 Java虚拟机可以看做是一台抽象的计算机,如同真实的计算机那样,它有自己的指令集以及各种运行时内存区域 Java虚拟机与Java语言并没有必然…

【数据结构】常见的排序算法

常见的排序算法 常见的排序算法插入排序之直接插入排序时间复杂度特性总结 插入排序之希尔排序时间复杂度 选择排序之直接选择排序特性总结 选择排序之堆排序时间复杂度特性总结 交换排序之冒泡排序特性总结 交换排序之快速排序hoare版本挖坑法双指针法快速排序的优化1&#xf…

【Python基础教程】super()函数的正确使用方法

前言 大家早好、午好、晚好吖 ❤ ~欢迎光临本文章 1.super(本身类名,self).方法名(参数)这样就可以调用父类的方法和参数了,super()内也可不加参数 2.规律是super是按调用的次序执行,super后面的语句是逆向执行的。 有2段示例代码,不同的在于value有没…

NB-IOT 和蜂窝通信(2/3/4/5G)的区别和特点是什么?

NB-IOT 和蜂窝通信(2/3/4/5G)的区别和特点是什么? 参考链接:https://www.sohu.com/a/221664826_472880 NB IOT是窄带物联网技术,主要解决的是低速率数据传输,可使用GSM900或DCS1800频段,在频段使用上比较灵活,可以和GSM,UMTS或LTE共存,具备优异的MCL(最小耦合损耗…

Vue3 条件渲染简单应用

去官网学习-》条件渲染 | Vue.js 运行示例&#xff1a; 代码&#xff1a;HelloWorld.vue <template><div class"hello"><h1>Vue 条件渲染</h1><h2 v-if"flag">true显示内容</h2><h2 v-if"flag2">fal…

我的创作5周年纪念日

机缘 CSDN在 SEO 方面做得很好。所以容易接触到。 然后就尝试使用了。没想到已经5年了。 收获 写blog其实是对知识的总结&#xff0c;能让自己更好的分享交流&#xff0c;让自己能和其他技术者一起交流迭代&#xff0c;并且把技术内容不断做好&#xff0c;让更多人通过技术…

【周末闲谈】“深度学习”,人工智能也要学习?

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️周末闲谈】 系列目录 ✨第一周 二进制VS三进制 ✨第二周 文心一言&#xff0c;模仿还是超越&#xff1f; ✨第二周 畅想AR 文章目录 系列目录前言机器学习深度学习深度学习的三在种方法深度学习讲解…

据说这是最详细的,HttpRunner接口自动化框架讲解,直接上高速...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 框架简介 HttpRu…

Golang之路---02 基础语法——函数

函数 由于Golang语言是编译型语言&#xff0c;所以函数编写的顺序是无关紧要的&#xff0c;它不像 Python 那样&#xff0c;函数在位置上需要定义在调用之前。 函数定义 func function_name( [parameter list] ) [return_types] {函数体 }参数解释&#xff1a; func&#x…

Java实现数字加密

Java实现数字加密 需求分析代码实现小结Time 需求分析 1.首先&#xff0c;考虑方法是否需要接收数据处理&#xff1f; 需要一个4位数&#xff0c;至于是哪一个数&#xff0c;让方法的调用者传递。 所以&#xff0c;方法的参数&#xff0c;就是这个需要加密的四位数 2.接着&…

webpack基础知识三:说说webpack中常见的Loader?解决了什么问题?

一、是什么 loader 用于对模块的"源代码"进行转换&#xff0c;在 import 或"加载"模块时预处理文件 webpack做的事情&#xff0c;仅仅是分析出各种模块的依赖关系&#xff0c;然后形成资源列表&#xff0c;最终打包生成到指定的文件中。如下图所示&#…

转运相关的征兆,大家可以来看看

转运是一种喜讯&#xff0c;意味着运势将逐渐好转&#xff0c;人生会迎来一系列积极的变化。 虽然没有确切的科学根据可以证明转运的存在&#xff0c; 但是在许多传统文化和民俗中&#xff0c;人们都相信转运的征兆是实实在在的。 虽然无法确保这些征兆会在每种情况下都适用&am…

【100天精通python】Day27:文件与IO操作_CSV文件处理

目录 专栏导读 1. CSV文件格式简介 2 csv模块的使用方法 3 读写CSV文件的示例 3.1 读取CSV文件示例 3.2 写入CSV文件示例 4 CSV文件的常用数据处理 4.1 读取CSV文件的特定列 4.2 读取CSV文件的特定行 5 csv 文件的特殊处理 5.1 处理包含逗号、换行符、引号的字段 5.…

Verilog学习记录-自用

always语句块一定条件写完整&#xff0c;否则电平触发&#xff0c;综合生成锁存器 task不可综合&#xff0c;主要用于仿真/验证 大部分都是并行执行的&#xff0c;只有begin end块中阻塞语句是串行 if-else和case的区别 if-else面积小&#xff0c;但时延&#xff08;执…