腾讯地图GL JS点标识监听:无dragend事件的经纬度获取方案

在这里插入图片描述

引入腾讯地图SDK

    <!--腾讯地图 API--><script charset="utf-8" src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=***"></script>

构建地图容器

        <div class="layui-card"><div class="layui-card-header lock_title" style="text-align: center;">单击地图获取经纬度</div><div class="layui-form-item"><div id="lock_map" style="width: 100%;height: 250px;"></div></div></div>

点标识监听事件获取经纬度

腾讯地图GL版中,没有拖动事件,具体事件如下:
在这里插入图片描述
因此,在添加listener到eventName事件的监听器数组中时,采用单击地图的单击事件click

MarkerLayer 点图层
在这里插入图片描述

   <!--腾讯地图实例-->var center = new TMap.LatLng(lnglat[1], lnglat[0]);var map = new TMap.Map("lock_map", {zoom: 17,center: center});//初始化marker图层var markerLayer = new TMap.MultiMarker({id: 'marker-layer',map: map,geometries: [{"position": center}]});//监听点击事件添加markermap.on("click", (evt) => {//console.log(evt.latLng.lat);//清楚掉上次点击的markermarkerLayer.setGeometries([]);//新增markermarkerLayer.add({position: evt.latLng});//经纬度将gcj02转为wgs84var lnglat = gcj02towgs84(evt.latLng.lng,evt.latLng.lat);//console.log(lnglat)$("#poi_longitude").val(lnglat[0]);$("#poi_latitude").val(lnglat[1]);});

步骤

  • 加载默认中心点标注;
  • 单击地图事件,获取经纬度
  • 清除上一个标注;
  • 新增标注

@漏刻有时

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/59618.shtml

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

相关文章

Tiktok对接和内容发布申请流程

这段时间在搞AI生成视频&#xff0c;希望用户能一键发布到Tiktok&#xff0c;因此研究了一下Tiktok的开发者申请流程&#xff0c;发现好复杂&#xff0c;同时也发现Tiktok的开发也跟我一样&#xff0c;挺草台班子的 0、流程简述 废话不多说&#xff0c;Tiktok的开发者申请和…

企业生产环境-麒麟V10(ARM架构)操作系统部署kafka高可用集群

前言&#xff1a;Apache Kafka是一个分布式流处理平台&#xff0c;由LinkedIn开发并捐赠给Apache软件基金会。它主要用于构建实时数据流管道和流应用。Kafka具有高吞吐量、可扩展性和容错性的特点&#xff0c;适用于处理大量数据。 以下是Kafka的一些核心概念和特性&#xff1…

xcode-select: error: tool ‘xcodebuild‘ requires Xcode, but active developer

打开 .sh 文件所在的终端窗口&#xff0c;执行终端命令&#xff1a;sh 文件名.sh&#xff0c;出现如下错误&#xff1a; 解决办法&#xff1a;

CC6学习记录

&#x1f338; cc6 cc6和cc1的国外链其实后半条链子是一样的&#xff0c;但是cc6的不局限于jdk的版本和commons-collections的版本。 回忆一下cc1的后半条链子&#xff1a; LazyMap.get()->InvokerTransformer.transform() 这里我们就结合了URLDNS链的思路&#xff0c;在…

MTU-内核态(数据链路层或网络接口上能够传输的最大数据包大小)

MTU&#xff08;最大传输单元&#xff0c;Maximum Transmission Unit&#xff09;是网络中用于表示数据链路层或网络接口上能够传输的最大数据包大小。 1. 工作原理 MTU 决定了一个数据包&#xff08;包括头部和数据部分&#xff09;的最大长度。它影响到数据的传输&#xff…

【系统架构设计师】真题论文: 论软件可靠性评价(包括解题思路和素材)

更多内容请见: 备考系统架构设计师-专栏介绍和目录 文章目录 真题题目(2010年 试题4)解题思路论文素材参考软件可靠性评价的重要意义软件可靠性评价方法(1)基于模型的评价方法(2)基于测试的评价方法(3)基于现场数据的评价方法软件可靠性评价应用案例真题题目(2010年 …

嵌入式硬件实战基础篇(一)-STM32+DAC0832 可调信号发生器-产生方波-三角波-正弦波

引言&#xff1a;本内容主要用作于学习巩固嵌入式硬件内容知识&#xff0c;用于想提升下述能力&#xff0c;针对学习STM32与DAC0832产生波形以及波形转换&#xff0c;对于硬件的降压和对于前面硬件篇的实际运用&#xff0c;针对仿真的使用&#xff0c;具体如下&#xff1a; 设…

网络安全练习之 ctfshow_web

文章目录 VIP题目限免&#xff08;即&#xff1a;信息泄露题&#xff09;源码泄露前台JS绕过协议头信息泄露robots后台泄露phps源码泄露源码压缩包泄露版本控制泄露源码(git)版本控制泄露源码2(svn)vim临时文件泄露cookie泄露域名txt记录泄露敏感信息公布内部技术文档泄露编辑器…

ReactPress与WordPress:一场内容管理系统的较量

ReactPress Github项目地址&#xff1a;https://github.com/fecommunity/reactpress WordPress官网&#xff1a;https://wordpress.org/ ReactPress与WordPress&#xff1a;一场内容管理系统的较量 在当今数字化时代&#xff0c;内容管理系统&#xff08;CMS&#xff09;已成为…

IDEA调整警告级别【IntelliJ IDEA 2024.2.0.1】

文章目录 目前现状鼠标悬停&#xff0c;选择配置筛选 > 取消选择OK效果 目前现状 需要把提示改成只要显示error的5个 鼠标悬停&#xff0c;选择配置 筛选 > 取消选择 OK 效果

实现 MVC 模式

实现 MVC 模式,通常可以通过分离 Model、View 和 Controller 的职责来构建一个模块化、易于维护的应用程序。以下是 MVC 的实现步骤和代码示例,以 Java Spring Boot 为例,这样的实现可以方便地应用于 Web 应用程序: 1. Model 层:数据和业务逻辑 Model 层负责应用程序的核…

Vue3 + Vite 构建组件库的整体流程

Vue3 Vite 构建组件库的流程 本文教你如何用 Vue Vite&#xff0c;一步一步构建一个组件库并发布到 npm 的整体流程 1. 通过 vite 命令创建一个基本的项目结构&#xff08;这里选用 vue ts 的项目&#xff09; npm create vitelatest2. 在项目中创建一个 lib 目录&#xf…

游戏引擎学习第10天

视频参考:https://www.bilibili.com/video/BV1LyU3YpEam/ 介绍intel architecture reference manual 地址:https://www.intel.com/content/www/us/en/developer/articles/technical/intel-sdm.html RDTS&#xff08;读取时间戳计数器&#xff09;指令是 x86/x86_64 架构中的…

正则表达式(补充)

定义一个正则表达式 const 变量名 /表达式/ const reg /前端/ 匹配看字符串中有无前端俩字 正则对象上的一些方法 test() 用于查看正则表达式与指定的字符串是否匹配 const reg /前端/ const res reg.test(学前端&#xff0c;找黑马) //匹配到返回true,匹配不到返回fa…

linux怎么查看网络带宽命令

说明: 1、研发反馈访问中间件有时候很慢,查看zabbix监控,发现带宽很高 2、但不知道具体什么应用业务访问导致,所以要用查看带宽命令获取实时数据 要查看带宽使用情况,具体取决于您的操作系统和可用的工具,以下是一些常用的命令: Windows: 使用 netstat -e 命令查看网络接…

视频编码基础入门

文章目录 前言一、视频编码的目标二、 视频编码基本流程1. 采样与颜色空间转换2. 变换编码&#xff08;例如DCT&#xff09;3. 量化4. 熵编码5. 运动补偿和帧间预测6. 编码输出 三、视频编码的关键技术1. 帧类型2. GOP&#xff08;Group of Pictures&#xff09;结构3. 比特率控…

CSS 语法规范

基本语法结构 CSS 的基本语法结构包含 选择器 和 声明块,两者共同组成 规则集。规则集可以为 HTML 元素设置样式,使页面结构和样式实现分离,便于网页的美化和布局调整。 CSS 规则集的结构如下: selector {property: value; }选择器(Selector) 选择器用于指定需要应用…

Rust 语言学习笔记(五)

终于来到了 Rust 的精髓所在了&#xff0c;那就是使之不依赖于垃圾回收又能保障内存安全且高效运行的所有权系统(Ownership System)。想要用 Rust 做一个稍显规模项目必定绕不过它&#xff0c;所有权系统包括所有权(Ownership), 借用(Borrowing), 生命周期(Lifetimes)。 以下概…

【在Linux世界中追寻伟大的One Piece】多路转接epoll(续)

目录 1 -> epoll的工作方式 1.1 -> 水平触发(Level Triggered)工作模式 1.2 -> 边缘触发(Edge Triggered)工作模式 2 -> 对比LT与ET 3 -> 理解ET模式和非阻塞文件描述符 4 -> epoll的使用场景 5 -> epoll示例 5.1 -> epoll服务器(LT模式) 5.2…

计算机视觉 ---常见图像文件格式及其特点

常见的图像文件格式及其特点如下&#xff1a; JPEG&#xff08;Joint Photographic Experts Group&#xff09; 特点&#xff1a; 有损压缩&#xff1a;通过丢弃一些图像数据来实现高压缩比&#xff0c;能显著减小文件大小&#xff0c;适合用于存储照片等色彩丰富的图像。但过…