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 …

React 用来解析html 标签的方法

在React中,解析HTML标签通常是使用JSX(JavaScript XML)语法的一部分。JSX允许您在JavaScript代码中编写类似HTML的标记,然后通过React进行解析和渲染。 以下是React中解析HTML标签的几种常见方式: 直接在JSX中使用标…

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

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

Kuibernetes 如何根据不同业务场景调节 HPA 扩缩容灵敏度

背景 在 K8s 1.18 之前,HPA 扩容是无法调整灵敏度的: 对于缩容,由 kube-controller-manager 的 --horizontal-pod-autoscaler-downscale-stabilization-window 参数控制缩容时间窗口,默认 5 分钟,即负载减小后至少需要等 5 分钟才…

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有没…

MySQL 主从搭建

文章目录 前言一、MySQL 主从是什么?二、通过 Docker 部署三、配置主从关系四、实际情况分析&解决方案五、常见问题处理1、CLONE需要版本不同2、CLONE需要参数相同 总结 前言 MySQL 主从搭建 操作系统:CentOS Linux release 7.9.2009 (Core) 操作系…

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…

python进阶编程

lambda匿名函数 python使用lambda表达式来创建匿名函数 语法 // lambda 参数们&#xff1a;对参数的处理 lambda x : 2 * x // x 是参数&#xff0c; 2*x 是返回值 ​ //使用lambda实现求和 sum lambda arg1, arg2 : agr1 arg2 print(sum(10,20)) ​ // 将匿名函数封装在一…

我的创作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.接着&…