Leaflet - 可拖动标记和坐标以字段形式显示

2024-01-16

我必须做一个可拖动的标记,它的坐标应该显示在字段中。它将成为 PHP 联系表单的一部分。我创建了一个可拖动标记,请帮助我现在做什么。

var marker = L.marker(new L.LatLng(53.471, 18.744), {
draggable: true
}).addTo(map);

http://jsfiddle.net/xTh5U/ http://jsfiddle.net/xTh5U/

这是 Google Maps API 中的示例,我在 Leaflet 中需要相同的示例。


您应该使用L.Marker的dragend事件,这样您就知道拖动已经结束,然后使用L.Marker的getLatLng方法获取标记的坐标。获取这些内容后,您可以将它们分配给文本输入的值。

marker.on('dragend', function (e) {
    document.getElementById('latitude').value = marker.getLatLng().lat;
    document.getElementById('longitude').value = marker.getLatLng().lng;
});

Plunker 上的工作示例:http://plnkr.co/edit/iyMhaoAyllr2uNSOHhS9?p=preview http://plnkr.co/edit/iyMhaoAyllr2uNSOHhS9?p=preview

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

Leaflet - 可拖动标记和坐标以字段形式显示 的相关文章

  • 使用 获取用于 javascript 的 RSA 密钥?

    我的 Web 项目需要一个 RSA 密钥对 虽然有一些库 但我认为依靠浏览器 为了安全性和速度 为我生成密钥是个好主意 是否可以使用注册机或其他浏览器 API 来执行此操作 我不知道如何从注册机获取密钥 它们似乎是在提交时生成的 但我不想将
  • 使用 npm 作为构建工具连接文件

    我最近发现我可以使用 npm 作为任务运行程序 而不是 gulp 或 grunt 到目前为止 一切都很棒 lint stylus jade uglify watch 等 但串联部分 我似乎无法实现 gulp 是这样的 gulp task s
  • Webpack 缺少 CommonsChunk 和 extract-text-webpack-plugin 模块

    我正在跟进Maxime Fabre 的 Webpack 教程 https blog madewithlove be post webpack your bags 我正在尝试获得一个非常简单的 webpack 包 其中包含 1 个入口点和 2
  • 如果浏览器在 asp .net 中关闭,请从浏览器中注销?

    我的要求有点复杂 用户正在使用 Web 浏览器访问数据库 而在访问数据库时 如果用户关闭活动页面而不是注销会话 该会话需要自动注销 有人可以指导我如何做这个吗 我在母版页中使用了jquery onbeforeunload 我收到消息离开页面
  • Streamjs和linqjs有什么关系

    读完SICP后 我最近发现streamjs https github com dionyziz stream js 开发商参考linqjs http linqjs codeplex com 作为具有不同语法的替代实现 但我无法建立连接 St
  • jQuery 验证日期范围问题

    我的代码中有很多地方有成对的相关开始和结束日期字段 范围 我需要验证开始日期早于结束日期 我正在使用 jQuery 验证插件 这是我的代码 http jsfiddle net jinglesthula dESz2 http jsfiddle
  • React/Redux bundle.js 太大

    我有一个小型的 React 项目 Webpack生成的bundle js大小为6 3Mb 如何将大小减小到 github webpack config js module exports devtool inline source map
  • 在 IE10 中禁用捏合放大

    在 IE10 触摸模式下 我希望仅使页面的特定部分可缩放 其余的不应该 我找到了这个 http msdn microsoft com en US library ie hh772044 aspx http msdn microsoft co
  • TRACKER:错误TRK0005:无法找到:“CL.exe”。该系统找不到指定的文件

    我尝试在 Windows 8 上的 Node js 项目中执行以下命令 npm 安装 电子邮件受保护 cdn cgi l email protection 但我收到一个错误 我不知道如何处理 TRACKER 错误TRK0005 无法找到 C
  • 离子旋转器未显示

    我用 http 请求填充 Ionic 集合重复列表 但我不想将所有内容直接加载到 DOM 中 因此 我只显示其中一些项目 并在您向下滚动时添加其余项目 为此我实现了无限滚动功能 当我到达页面底部时 它应该显示一个旋转器 但它没有 这些物品至
  • 更新 Google 地图流量层而无需重新加载页面

    我的页面中嵌入了 Google 地图 我使用 initMap js 函数来初始化地图 function initMap var map new google maps Map document getElementById t map zo
  • 如何将函数传递给 JavaScript Web Worker

    我想通过一个 或多个 函数传递postMessage 给网络工作者 因为我无法引用常规文件 为了启动 Web Worker 我将一个对象 URL 从 Blob 创建 传递给Worker构造函数 然后我传递一条消息 但到目前为止还没有在消息中
  • 更改时触发跨度文本/html

    jQuery 或 JavaScript 中是否有任何事件在以下情况下触发span标签 text html 已更改 Code span class user location span user location change functio
  • 获得一次性绑定以适用于 ng-if

    这个问题已经被之前问过 https stackoverflow com questions 23969926 angular lazy one time binding for expressions 但我无法让该解决方案发挥作用 所以我想
  • 浏览器默认区域设置 - Intl.DateTimeFormat 与 navigator.language

    在对网站进行编码并格式化日期时 我想使用用户在浏览器中设置的区域设置 例如 如果用户定制了他们的chrome settings languages在 Chrome 中设置为非默认值 这就是我想要使用的值 但是 当我在此类浏览器的控制台中运行
  • HTML 和 JavaScript - 将滚动操作从一个元素传递到另一个元素

    假设我有两个 div div div div A scrollable list div 我想让它当光标停在里面时 control并且鼠标滚轮滚动 view将会滚动 无论如何要实现这一目标 好的 快速修复对我有用 即使固定 div 不可滚动
  • 如何生成 JavaScript 堆栈跟踪? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 关于如何以跨浏览器的方式在 javascript 中生成堆栈跟踪有什么建议吗 较新的浏览器 Chrome 和 Firefox 公开了一个允
  • 如何使用 Jest 测试对象键和值的相等性?

    我有一个mapModule我在其中导入组件并导出它们 import ComponentName from components ComponentName export default name ComponentName 我该如何测试ma
  • Angular 2访问组件内的ng-内容

    我怎样才能访问 content 来自组件类本身的组件 我想做这样的事情
  • 使用 JavaScript onclick 添加表格行

    我正在尝试使用 javascript 添加下面找到的完全相同的元素 我已经尝试了这里找到的所有解决方案 我什至尝试用php echo但没有运气 无需更改任何输入名称或类似内容 只需单击该按钮即可向表中添加另一行 仅此而已 这是该元素 tr

随机推荐

  • 如何模拟 HttpServletRequest? [复制]

    这个问题在这里已经有答案了 我有一个查找查询参数并返回布尔值的函数 public static Boolean getBooleanFromRequest HttpServletRequest request String key Bool
  • 在 Ruby on Rails 3 上上传多个文件[关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我想将多张图片上传到我的 Rails 3 应用程序 我目前正在使用 Paperclip 上传图片 并且我
  • 在 ReactJS 中显示/隐藏组件

    我们现在在使用 React 的过程中遇到了一些问题 但是它kinda归结为我们如何使用 React 的一部分 我们应该如何显示 隐藏子组件 这就是我们编码的方式 这只是我们组件的片段 click function if add here i
  • 如何在 Python 3 中使用 urllib.request 下载文件?

    所以 我正在搞乱urllib request在Python 3中 我想知道如何将获取互联网文件的结果写入本地计算机上的文件 我试过这个 g urllib request urlopen http media mcw cursecdn com
  • 如何为 reStructuredText、Sphinx、ReadTheDocs 等设置自定义样式?

    我想扩展使用的主题Sphinx and 阅读文档与我自己的自定义样式 为了让我的更改得以保留 最好的方法是什么 编辑 截至 2021 年 以下答案已过时 请使用html css files 在你的conf py而不是使用版本 1 8 之后的
  • 如何为 wxWidgets OpenGL 程序启用多重采样?

    多重采样 http en wikipedia org wiki Multisample anti aliasing是一种申请方式全屏抗锯齿 FSAA 在 3D 应用中 我需要在我的 OpenGL 程序中使用多重采样 该程序当前嵌入在wxWi
  • 如何在 Jest 中模拟嵌套函数?

    我收到这个错误 Cannot find module httpsGet from functions getSecureString test js httpsGet 是我自己的功能 位于按钮处getSecureString js 并通过调
  • 使用 OuterRef 的简单子查询

    我正在尝试做一个非常简单的Subquery使用OuterRef 不是为了实际目的 只是为了让它工作 但我一直遇到同样的错误 posts models py code from django db import models class Ta
  • ASP.NET MVC 部分视图不调用我的操作

    我刚刚开始在 ASP NET MVC 上构建一个小型简单网站 在一个页面中我使用部分视图 部分视图代表一个简单的表单 应该在单击按钮时提交 如果我第一次单击它提交的时间成功并返回我的部分视图和验证消息 如果内容无效 但如果我想再试一次 则不
  • “由于共享主机中的‘LOG_BACKUP’,数据库的事务日志已满”

    我有一个 Asp Net MVC 5 网站 在共享托管计划中采用实体框架代码优先方法 它使用开源网站面板 http www websitepanel net 控制面板及其 SQL Server 面板有些限制 今天想编辑数据库的时候 遇到了这
  • Android 在 HttpClient 中收到 403 后得到响应

    我有这样的代码 HttpClient httpClient new DefaultHttpClient HttpPost httpPost new HttpPost server try JSONObject params new JSON
  • 当单个模型被多个视图共享时

    有两种观点 listView QtGui QListView tableView QtGui QTableView 我继续定义一个自定义DataModel供双方使用listView and tableView class DataModel
  • oops 的完整形式是什么? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 的完整形式是什么OOPS 有人说面向对象的编程结构其他人说面向对象的编程系统 哪一个是正确的 编程范式是OOP 面向对象编程 其他一切都可以从它
  • 材质 UI - 轮廓选择标签未正确渲染

    根据演示 Material UI 概述选择输入的标签应位于选择框的顶部边框的顶部 然而 在我的应用程序中 z index标签的似乎将其放置在顶部边框后面 因此看起来像一条线穿过标签 我几乎完全从文档中获取了代码 据我所知 没有任何样式与此输
  • AngularDart:使用反应式表单生成器创建表单

    我正在尝试使用创建AngularDart 5 angular forms 2 该API似乎与angular forms 1我不知道如何创建一个FormGroup using FormBuilder and ControlGroup 下面是我
  • python 中真的存在联合类型吗?

    由于Python是动态类型的 我们当然可以这样做 def f x return 2 if x else s 但这是 python 真正的用途吗 或者换句话说 联合类型是否像 Racket 中那样存在 或者我们只像这样使用它们 def f x
  • 使用git中的hooks导入和导出到csv

    我想知道这是否可能 创建连接到 cvs 的共享 git 存储库 post two hooks to it 每次有人从中提取时 它都会从 cvs 存储库导入 每次有人推送它时 它都会导出到 cvs 存储库 基本上创建一个对 git 用户完全透
  • XDT Transforms - 变换变换

    我正在创建一个 nuget 包 其中安装该包的部分结果是修改我的 web release config 我使用 web release config install xdt 将元素插入到此文件中没有问题 但我需要在要插入的元素上保留 xdt
  • Idris 中类型的模式匹配

    可能这是基本的 但我不明白为什么下面的函数回答 1fnc Nat并且 对于fnc 整数 它甚至没有作为模式包含在内 fnc Type gt Integer fnc Bool 1 fnc Nat 2 您不能对类型进行模式匹配 也不应该这样做
  • Leaflet - 可拖动标记和坐标以字段形式显示

    我必须做一个可拖动的标记 它的坐标应该显示在字段中 它将成为 PHP 联系表单的一部分 我创建了一个可拖动标记 请帮助我现在做什么 var marker L marker new L LatLng 53 471 18 744 draggab