数据可视化数据分析GIS【免费下载链接】foliumPython Data. Leaflet.js Maps.项目地址https://gitcode.com/gh_mirrors/fo/folium点击查看免费下载导读本文基于 folium 用户指南中的 click_related_classes 文档系统讲解 folium 提供的三个地图点击交互类ClickForMarker点击创建标记、LatLngPopup点击弹出经纬度信息与ClickForLatLng点击复制坐标到剪贴板。读完本文你将掌握这三类组件的接入方式、自定义参数与底层实现原理能够在自己的交互式地图应用中快速落地点击取点、点击取坐标等常用功能。这三个类均位于 folium 的 features.py 中LatLngPopup起始于第 1759 行ClickForMarker起始于第 1785 行ClickForLatLng起始于第 1831 行并已通过 folium/__init__.py 导出为顶层 APIClickForMarker、ClickForLatLng、LatLngPopup均出现在__all__列表中因此可以直接以folium.ClickForMarker()的形式使用无需额外导入。快速上手三个组件的经典用法所有三个类都以MacroElement为基类用法高度一致创建一个folium.Map然后通过add_child()或等价的add_to()将交互组件挂载到地图上即可。以下三段代码分别对应原文档中的三个最小示例import folium # 1. 点击任意位置在地图上创建标记marker folium.Map().add_child( folium.ClickForMarker() ) # 2. 点击任意位置弹出显示经纬度的小弹窗 folium.Map().add_child( folium.LatLngPopup() ) # 3. 点击任意位置将坐标复制到浏览器剪贴板 folium.Map().add_child( folium.ClickForLatLng(format_str[ lat , lng ], alertTrue) )提示原文档使用folium.Map().add_child(...)的链式写法示例并未指定地图中心点与初始缩放级别这在实际交互中不影响点击功能本身。若希望地图默认定位到特定区域可改用folium.Map(location[...], zoom_start...)后再挂载这些组件。交互效果说明ClickForMarker每点击一次地图就在点击位置生成一个标记markerLatLngPopup每点击一次地图就弹出一个显示指针所在经纬度的小弹窗ClickForLatLng每点击一次地图就把指针所在坐标复制到浏览器剪贴板。下面分别深入讲解每个组件。ClickForMarker点击地图创建标记基本行为ClickForMarker的核心能力是点击即打点。从 features.py 的模板源码可以看出它实际生成了一段 Leaflet 脚本function newMarker(e){ var new_mark L.marker().setLatLng(e.latlng).addTo(...); new_mark.dragging.enable(); new_mark.on(dblclick, function(e){ ...removeLayer(e.target); }); var lat e.latlng.lat.toFixed(4), lng e.latlng.lng.toFixed(4); new_mark.bindPopup(...); }; map.on(click, newMarker);由此可以归纳出几个值得注意的实现细节可拖动新创建的标记默认启用了拖拽dragging.enable()方便创建后微调位置双击删除对标记双击可将其从地图图层中移除removeLayer便于清理误点的标记坐标精度标记经纬度统一使用toFixed(4)即保留 4 位小数事件绑定通过 Leaflet 的map.on(click, ...)将点击事件与打点逻辑绑定这是整个组件底层交互的关键。自定义弹出内容与${lat}/${lng}占位符默认情况下不传popup参数每个标记的弹窗会显示标记自身的经纬度。你还可以通过popup参数自定义弹窗内容支持三种传入形式字符串直接传入 HTML 字符串作为弹窗内容IFrame 对象folium 的IFrame元素Html 对象folium 的Html元素。在字符串中可以使用两个占位符${lat}与${lng}它们会在运行时被替换为标记的实际经纬度。原文档给出的经典示例folium.Map().add_child( folium.ClickForMarker(bLat:/b ${lat}br /bLon:/b ${lng}) )这段代码会把弹窗渲染为Lat: 纬度 / Lon: 经度的加粗文本其中br /用于换行。从源码看features.pypopup参数的处理逻辑为当传入的是Element子类如IFrame、Html时会先调用popup.render()渲染为 HTML 字符串若popup非空则通过escape_backticks()定义于 folium/utilities.py转义反引号后以反引号包裹注入到 JavaScript 模板中避免与模板字符串冲突若popup为空则使用默认表达式Latitude: lat brLongitude: lng 动态拼接经纬度。也就是说${lat}与${lng}占位符是在JavaScript 模板层面被替换的模板中先读取点击事件提供的lat、lng变量再拼接到bindPopup(...)的内容里。理解这一点有助于你设计更复杂的自定义弹窗格式。类型校验的一个补充说明在 tests/test_features.py 中存在一条针对ClickForMarker的用例将markerClickForMarker()作为marker参数传给GeoJson时测试断言会抛出TypeError。这说明ClickForMarker设计为直接挂载到地图上的点击交互组件并不适合充当GeoJson的marker参数该参数期望的是标记工厂类型而非交互组件实际使用时应把ClickForMarker作为地图的add_child对象。LatLngPopup点击弹出经纬度LatLngPopup的功能非常纯粹点击地图任意位置弹出一个显示指针坐标的小弹窗。其最小用法为folium.Map().add_child( folium.LatLngPopup() )从 features.py 的实现模板可以看到它的底层机制是var popup L.popup(); function latLngPop(e) { popup .setLatLng(e.latlng) .setContent(Latitude: e.latlng.lat.toFixed(4) brLongitude: e.latlng.lng.toFixed(4)) .openOn(map); } map.on(click, latLngPop);几个实现要点复用单个弹窗实例LatLngPopup只创建一个L.popup()实例每次点击时通过setLatLng()移动位置、setContent()更新内容、openOn()打开避免了不断新建弹窗对象造成的内存与 DOM 开销内容格式固定显示内容为Latitude: 纬度brLongitude: 经度经纬度均保留 4 位小数无构造参数LatLngPopup.__init__()不接受任何参数功能与交互方式均已内置开箱即用。如果你只是想快速查看某点的坐标而不需要在地图上保留任何标记LatLngPopup是最轻量、最合适的选择。ClickForLatLng点击复制坐标到剪贴板基本行为与默认格式ClickForLatLng解决的是把地图上的坐标拿到地图之外的需求点击地图后坐标会被写入浏览器剪贴板。原文档中的示例为folium.Map().add_child( folium.ClickForLatLng(format_str[ lat , lng ], alertTrue) )这里format_str被设置为[ lat , lng ]因此点击后剪贴板中的内容形如[46.558860,3.397397]与 Python 列表字面量格式一致便于直接粘贴回代码中使用。两个核心参数ClickForLatLng的构造函数定义了两个参数见 features.py参数类型默认值说明format_strstrlat , lng用于拼接复制内容的 JavaScript 字符串表达式alertboolTrue复制成功后是否弹出提示框alertformat_str是一个JavaScript 表达式字符串而非静态文本。表达式内可引用lat、lng两个变量源码中以toFixed(6)保留 6 位小数。文档与源码中给出的对照示例format_str lat , lng复制结果 →46.558860,3.397397format_str [ lat , lng ]复制结果 →[46.558860,3.397397]注意 JSON 字符串中需要转义内层引号\[\ ...这正是示例中[ ...的写法来源。同理你也可以构造 GeoJSON 坐标对{lon: lng , lat: lat }等任意符合你业务需求的格式。alertTrue时点击后浏览器会弹出提示框显示已复制的内容若在自动化或批量采集场景下不希望弹窗打断操作可将其设为False。底层实现对应的 Leaflet 模板features.py核心逻辑为function getLatLng(e){ var lat e.latlng.lat.toFixed(6), lng e.latlng.lng.toFixed(6); var txt format_str 表达式; navigator.clipboard.writeText(txt); if (alert) alert(Copied to clipboard : \n txt); }; map.on(click, getLatLng);这里有两个值得注意的技术点使用 Web Clipboard API写入操作依赖浏览器提供的navigator.clipboard.writeText因此该功能要求在现代浏览器中运行并且在部分浏览器中可能需要页面处于安全上下文HTTPS 或 localhost表达式求值format_str是作为 JavaScript 代码片段直接嵌入var txt ...;语句中执行的所以它必须是一个合法的 JS 表达式这正是其默认值与示例都形如lat , lng的原因。在 Python 侧取回坐标浏览器剪贴板中的内容如何回到 Python 进程中原文档给出了一个非常实用的工作流点击若干次地图后在 Python 端使用clipboard库读取剪贴板内容直接得到坐标列表 import clipboard clipboard.paste() [-43.580391,-123.824467]由于format_str被设置为 Python 列表字面量格式clipboard.paste()返回的字符串恰好就是可直接解析的列表文本。实际使用时注意clipboard是第三方库需要单独安装pip install clipboard后才能导入同时浏览器与 Python 必须运行在同一台机器上剪贴板共享才能生效。若你运行在远程服务器或容器环境中这一回读方式将不适用可改为通过前端采集后回传的常规 Web 交互方案。三者对比与选型建议组件点击后的行为是否保留标记输出去向适用场景ClickForMarker创建可拖动标记可带自定义弹窗是双击可删除地图图层采集点位、标注兴趣点、绘制采样点LatLngPopup弹出经纬度小弹窗否屏幕弹窗快速查看坐标、临时测点ClickForLatLng复制坐标到剪贴板否系统剪贴板批量取点后粘贴回脚本/表格三者都基于同一个 Leaflet 事件机制——map.on(click, ...)——只是对点击事件的处理方式不同。选择依据很简单需要在地图上留下点用ClickForMarker只是看一眼坐标用LatLngPopup要把坐标带出地图用ClickForLatLng。组合使用与完整示例这三个组件彼此独立可以同时挂载到同一张地图上互不冲突。例如下面的代码把三种交互叠加在一张地图中import folium m folium.Map(location[46.55886, 3.39740], zoom_start6) m.add_child(folium.LatLngPopup()) m.add_child( folium.ClickForMarker(bLat:/b ${lat}br /bLon:/b ${lng}) ) m.add_child( folium.ClickForLatLng(format_str[ lat , lng ], alertFalse) ) m.save(click_interactions.html)保存为 HTML 后用现代浏览器打开即可同时体验点击弹出坐标点击打点并显示自定义弹窗点击复制坐标三种交互。组合挂载的注意事项ClickForMarker与ClickForLatLng都会消费地图的click事件虽然它们各自注册的监听器互不覆盖但同一位置的一次点击会同时触发多个组件例如既打点又复制坐标。若你的业务中两种行为语义冲突建议按需只挂载其中一个而不是全部叠加。深入理解MacroElement 与模板渲染机制这三个组件均为MacroElement的子类。在 folium 的架构中MacroElement表示需要向地图注入自定义 JavaScript 宏模板的元素——每个类内部定义了一个 Jinja2Template其中包含{% macro script(this, kwargs) %}代码块。渲染地图时这些宏会被展开为最终 HTML 页面中的script片段。具体到点击类组件模板展开后生成的脚本结构可以概括为三步定义处理函数如newMarker(e)、latLngPop(e)、getLatLng(e)从 Leaflet 点击事件对象e.latlng中提取坐标挂载监听器通过{{this._parent.get_name()}}.on(click, fn)把处理函数注册到父级地图对象上this._parent即挂载该组件的地图注入自定义内容将popup、format_str等 Python 侧参数嵌入模板实现配置驱动的行为定制。理解这一机制后你就能推断出任何MacroElement子类都必须通过add_child/add_to挂载到地图或图层组上才会生效因为模板中的this._parent需要指向一个真实的父级地图实例。这也解释了为什么本文所有示例都采用folium.Map().add_child(...)的写法。小结ClickForMarker让用户在地图上点击打点支持popup自定义弹窗与${lat}、${lng}占位符标记可拖动、可双击删除LatLngPopup以最轻量的方式在点击位置弹出经纬度信息无任何配置参数ClickForLatLng通过format_str自定义复制格式默认lat , lng保留 6 位小数通过alert控制复制提示底层使用 Web Clipboard API 写入剪贴板三者都是MacroElement实现方式均为向地图注入基于click事件的 Leaflet 脚本可组合挂载、互不干扰相关源码与测试可分别在 folium/features.py、folium/init.py 与 tests/test_features.py 中查阅帮助你进一步理解实现细节与使用边界。赞分享数据可视化数据分析GIS【免费下载链接】foliumPython Data. Leaflet.js Maps.项目地址https://gitcode.com/gh_mirrors/fo/folium点击查看免费下载相关推荐组件生命周期与事件处理组件生命周期与事件处理 Blazor组件的生命周期与事件处理紧密相关理解生命周期阶段可以帮助我们更有效地管理事件和资源。以下是关键的生命周期方法及如何与事件结UI组件前端Context Hub 搜索算法内幕BM25 倒排索引与模糊匹配代码级拆解Context Hub 搜索算法内幕BM25 倒排索引与模糊匹配代码级拆解 Context Hubchub是一个为 AI 编码代理提供精选 API 文档的ngx-admin 图表事件点击与悬停交互处理ngx admin 图表事件点击与悬停交互处理 ngx admin 作为基于 Angular 和 Nebular 的企业级后台管理模板提供了丰富的图表组件支前端UI组件上一篇手柄焕新之旅探索Joy-Con Toolkit的三大核心能力下一篇青龙面板依赖管理效率神器QLDependency自动化部署方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考