Leaflet js:如何在地图上绘制任何标记结束时获取纬度和经度

2023-12-02

我得到了一个接近的代码,但我不确定,因为我是第一次使用 Leaflet js。

我的意图是:假设 Leaflet js 正在显示地图或非地理数据,并且我有一个与 Leaflet js 相关的工具栏。工具栏有许多标记,如圆形、多边形、方形等。当用户单击工具栏上的任何标记开始在地图上绘制时,标记的绘制何时完成,我怎么知道?

我如何附加一个函数来作为绘图完成的回调,并且该函数还让我知道标记的纬度和经度。如果我知道纬度和经度,那么我可以保存在数据库中,稍后我们可以重复使用它来绘制形状。

我得到的下面的代码

var map = L.map('mapcanvas').setView([51.505, -0.09], 13);

map.on('click', function(e){
    // Place marker
    var marker = new L.marker(e.latlng).addTo(map);

    // Ajax query to save the values:
    var data = {
        lat: e.latlng.lat,
        lng: e.latlng.lng
    }

    // saving lat and lng to db by ajax call
    var request = new XMLHttpRequest();
        request.open('POST', '/my/url', true);
        request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        request.send(data);
});

请看一下代码,我不确定它是否解决了我的目的,因为这里的代码与地图的点击事件一起使用。

所以当我们点击地图时,标记绘制就完成了。因此,请阅读我的文章并了解我在寻找什么,并建议我如何实现它的最佳想法。谢谢


取决于您用来绘制多边形/形状的内容。如果您使用 leaflet.draw,您会执行以下操作:

map.on('draw:created', function(e) {
    var points = JSON.stringify(e.layer.toGeoJSON());
});

然后将点保存到您的数据库中。

阅读传单.draw文档,它非常完整且简单。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Leaflet js:如何在地图上绘制任何标记结束时获取纬度和经度 的相关文章

  • React 组件渲染被调用两次而不改变状态

    我正在渲染一个简单的反应组件 其中没有设置状态和道具 我在渲染函数中仅将文本记录到控制台一次 但它被记录了两次 rendering counter rendering counter 下面是counter js组件的代码 import Re
  • 如何使用 Shopify API 将商品添加到购物车

    我正在使用 Shopify API 开发自定义网络应用程序 这里的想法是使用应用程序作为独家店面 只需向 Shopify API 发出请求 我已在我的 Shopify 帐户中设置了一个私人应用程序来执行此操作 我从 api 提取产品没有问题
  • 使用 jquery 淡入/淡出

    我正在研究我的学生项目 我是新的 jquery 对于该项目 我必须使用 jquery 来增强一些功能 并且我已经学到了很多来执行基本任务 但我陷入了一些非常令人困惑的事情 我的一个脚本实际上在鼠标悬停在功能上时更改了 div 容器的图像 功
  • Node + now.js + 模型-视图-控制-模式

    我正在使用基于 MVC 模式 模板和 PHP 类 的论坛软件 页面如下所示 domain com index php page Test 我想使用 Node 和 now js 在一个页面 domain com index php page
  • Exceljs:迭代每行和每列的每个单元格

    我想在所有单元格中添加粗边框 这是一个有角度的项目 我正在使用打字稿 我可以为 1 个单元格做到这一点 worksheet getCell A1 border top style thick left style thick bottom
  • Javascript hasOwnProperty 在事件对象上总是 false?

    我希望有人可以帮助澄清与事件对象相关的 hasOwnProperty 方法 我正在尝试克隆鼠标事件 最终该对象将被传递到 iframe 我已经构建了一个 克隆 函数 但每当我尝试克隆窗口事件 即滚动 单击等 时 hasOwnProperty
  • 如何使用jquery格式化数字

    我正在尝试删除 之后的数字 然后我想格式化数字 16810900 211233 喜欢这个 16 810 900 但我不知道该怎么做 这是我的 html 是这样的 div class main p class active 10200 00
  • 重新排序 Magento JavaScript 包含 (addJs)

    我会保持简单 在我的产品页面上 我需要删除prototype js 文件并将其替换为最新版本的prototype 到目前为止 我已经使用 local xml 成功替换了它
  • 将图像缩略图上传到服务器,而不上传整个图像

    据我所知 我在这里问的是不可能的 但我想无论如何我都会问 以防我遗漏了什么 假设您想让用户上传 JPG 图像 并且这些图像被缩放为较小的图标 并且原始图像始终被丢弃并且不再需要 有没有什么方法可以在大多数现代浏览器中普遍使用 让用户选择硬盘
  • Chart.js - 如何将数组集合推入数据集

    我一直在尝试多种方法将数组集合推送到数据集中 任何人都可以帮助我根据下面的代码将数组推入堆积图表中 这是例子 Codepen 堆叠栏 https codepen io narendrajadhav pen abzpWam JavaScrip
  • 内联执行生成的汇编程序

    我正在阅读以下演示文稿 http wingolog org pub qc 2012 js slides pdf http wingolog org pub qc 2012 js slides pdf其中讨论了 4 10 19 内联 ASM
  • Facebook 登录无法在移动浏览器中使用

    我使用 react facebook login 在我的网站中实现了 facebook 登录module https github com keppelen react facebook login 我在 ComponentDidMount
  • 它们是“相同的”吗?代码大战

    这是完整的问题描述 给定两个数组 a 和 b 编写一个函数 comp a b Clojure 中的 compSame a b 来检查这两个数组是否具有 相同 元素以及相同的重数 这里 相同 意味着 b 中的元素是 a 平方中的元素 无论顺序
  • 如何从Web JavaScript应用程序获取桌面C#程序中的变量

    我遇到一个问题 有两个应用程序 一种是 C 中的桌面应用程序 另一种是 javascript 中的 Web 应用程序 运行桌面应用程序中的一些变量或信息需要传输到Web应用程序 有谁知道如何解决这个问题 有人愿意提供更多细节来解决这个问题吗
  • 如何使用javascript从特定标签获取HTML文档中的所有textNode?

    如何在不使用xpath或treewalker的情况下从单个数组中的一组特定标签中获取所有textNodes blockquote em h4 h6 p IE不允许您使用xpath和treewalker 请帮助我 如果脚本仅适用于 IE 那就
  • 用于图形操作的 Javascript 库

    有没有建议的 javascript 替代 pythonpygraph http code google com p python graph or NetworkX http networkx lanl gov 应该注意的是 可视化不是必需
  • Bootstrap 3 - 模态背景不会根据模态对话框的高度调整大小?

    我将一个表单放入模式中 并尝试在用户触发单选按钮时显示表单的一些隐藏字段 显示隐藏字段后 模态自动重新缩放的高度 但模态背景的高度不能用作模态对话框 我该如何解决它 div class modal fade div class modal
  • 自动更改 Twitter Bootstrap 选项卡

    我希望 Twitter Bootstrap 选项卡按时间顺序更改 我使用它们有点像旋转木马 我希望选项卡每 10 秒切换到下一个选项卡 这是一个例子 http library buffalo edu http library buffalo
  • 检测图像是否损坏或损坏

    我需要以编程方式检查用户在我的应用程序上选择作为壁纸的图像是否已损坏或损坏 基本上我为用户提供了选择自己的图像作为壁纸的选项 现在 当图像加载时 我只想检查它是否已损坏 如果您正在寻找 PHP 解决方案而不是 javascript 解决方案
  • 在 Map() 的条目上使用 Promise.all

    我正在使用 Map 来表示一些键 值对 let myMap new Map myMap set foo bar myMap set foo2 bar42 对于每个 Map 条目 我执行一个返回 Promise 的函数 所有这些 Promis

随机推荐

  • 几个 catch 块还是一个带有dynamic_cast 的catch 块?

    我们有一个异常类的层次结构 有一个GenericException类以及从它派生的许多类 GenericException是多态的 它有一个虚拟析构函数 派生类之一是FileException抛出以指示操作文件系统对象时出现错误 FileE
  • PHP 中“&$var”中的“&”是什么意思? [复制]

    这个问题在这里已经有答案了 什么是 意思是在 var in PHP 有人可以帮我进一步解释一下吗 先感谢您 这意味着传递变量参考 而不是传递变量的值 这意味着当程序流返回到调用代码时 对 preparse tags 函数中该参数的任何更改都
  • 使用react-router的history.push()和自定义URL参数

    我正在尝试创建一个用户可以加入群组的应用程序 我拥有的页面之一是群组仪表板 为此 我创建了一个 URL 参数为 id 的路由
  • 禁止带有 `static_assert` 的函数

    我想阻止某些函数被调用 让我们忽略通过函数指针或其他东西调用函数的情况 只关注直接函数调用的情况 我可以这样做 delete 然而 发布的诊断信息并不丰富 我考虑过使用static assert 您可以使用它提供自定义诊断消息 我放置了一个
  • 将二维数组(字符串)存储到文件并检索它

    我制作了一个简单的程序 其中有一个存储大量数据的 2D 字符串数组 我搜索了很多地方来了解如何存储和检索二维数组 我想在程序结束时将数据保存在数组中 并在程序启动时检索该数据 我努力了 ObjectOutputStream toFile n
  • 如何将 java.lang.String 的空白 JSON 字符串值反序列化为 null?

    我正在尝试将一个简单的 JSON 反序列化为 java 对象 然而我却变得空虚String值java lang String属性值 在其余属性中 空白值将转换为null值 这就是我想要的 下面列出了我的 JSON 和相关的 Java 类 J
  • 从 python 中的标签名称中抓取数据

    您好 我正在尝试从网站上抓取用户数据 我需要用户 ID 该 ID 可在标签名称本身中找到 我正在尝试使用 python selenium 和 beautiful soup 中的 UID 来抓取div tag Example lt div i
  • 使用 Android 本机应用程序中的 ADAL 库对 Azure AD 上的用户进行身份验证

    我们有一个要求 用户应该从本机应用程序 Android iOS 登录 而不从应用程序调用 Microsoft 登录 Web 视图窗口 我们有示例代码 演示使用 net 控制台应用程序中的用户名和密码对 Azure AD 进行非交互式身份验证
  • FreeSwitch + Mode Verto + Webrtc + Android + 无法从 android 拨打电话

    我做了一个mode verto安卓客户端 使用WebRtc 预建库 org webrtc google webrtc 1 0 libjingle io pristine libjingle 11139 aar and 自由切换但只成功进行单
  • 启动 JavaFX 应用程序时的内部 NPE

    所以基本上我开始了一个虚拟的 JavaFX 项目 只是为了为我的实际问题实现一个简约的示例 但现在我什至无法再运行那个简约的项目 也没有收到足够的错误信息来自己用谷歌搜索出来 所以现在 当我运行代码时 我收到给定的错误堆栈 这不会引导我到任
  • Biztalk 和调用 Web 服务的最佳方式

    我正在编写一个 biztalk 编排 需要调用一个 Web 服务 可能是多个 Web 服务 而且可能不止一次 我面前有两个选择 一 在单独的代码项目中使用 wsdl 并从表达式形状的代码中调用 Web 服务 二 从 Biz 使用它 获取架构
  • 无法在 MySQL 中获得正确的编码

    一段时间以来 我一直在努力解决 MySQL 中的编码问题 我正在建立一个数据库 其中不仅包含拉丁文 还包含西里尔文和阿拉伯文文本 这是我如何创建数据库的示例 CREATE DATABASE db1 DEFAULT CHARACTER SET
  • 错误:该位置没有任何可重复的内容

    我有一个文本文件 其中包含俚语及其用真正的英语替代的列表 我使用 作为分割点将此文本文件转换为字典 并且在转换后打印字典时一切似乎都正常 但是 源自此行的错误 slangs re re compile join slang dict key
  • 对两个给定日期之间的集合日期字段进行排序

    我想根据两天之间的日期字段对列表进行排序 比如从现在到接下来的三天 排序列表应从现在开始和接下来的 3 天按升序排列 之后的所有先前和未来日期按升序排列 e g List
  • 如何在多个 EJB 之间共享 Java 缓存系统 (JCS) 资源

    我使用 JCS 来存储 ldap 搜索结果 该结果应由多个 EJB 共享 我创建了一个单例类来仅初始化 JCS 一次 但由于 EJB 的类加载器 它已使用自己的副本初始化了多次 所以搜索资源不共享 你们如何解决需要在多个 bean 之间共享
  • 如何让应用程序在后台保持唤醒状态

    我编写了一个应用程序 该应用程序连接到蓝牙设备并在汽车 在后台 和导航 或其他东西 在前台使用 但在 Android 7 也可能是 6 上 应用程序会在一段时间后进入睡眠状态 当我尝试从相机拍照时 睡眠模式 立即生效 我的应用程序现在正在睡
  • 从基类方法调用基类重写函数

    public class A public void f1 String str System out println A f1 String this f1 1 str public void f1 int i String str Sy
  • 检测精灵套件中的碰撞

    我正在尝试使用精灵套件制作一个简单的游戏 基本思想是 有一名玩家可以跳跃以避免阻挡 但我有一个问题 我不知道如何做到当玩家击中方块时玩家消失并且血液动画开始 首先 我不明白我在苹果网站上找到的这段代码的作用 static const uin
  • 一个 docker 用户可以向另一个用户隐藏数据吗?

    Alice 和 Bob 都是同一主机上 docker 组的成员 Alice 想要在 Docker 容器中运行一些长时间运行的计算 然后将结果复制到她的主文件夹中 Bob 非常爱管闲事 Alice 不希望他能够读取她的计算所使用的数据 系统管
  • Leaflet js:如何在地图上绘制任何标记结束时获取纬度和经度

    我得到了一个接近的代码 但我不确定 因为我是第一次使用 Leaflet js 我的意图是 假设 Leaflet js 正在显示地图或非地理数据 并且我有一个与 Leaflet js 相关的工具栏 工具栏有许多标记 如圆形 多边形 方形等 当