Leaflet 是轻量易用的地图库，需通过 CDN 引入并用 L.map() 和 L.tileLayer() 初始化，监听 click 事件获取 WGS84 坐标；对接国内地图须调用官方转换接口转 GCJ-02 或 BD-09，禁用 tap 并加防抖提升移动端点击准确性。
用 Leaflet 加载底图并监听点击事件最直接
原生 HTML 不支持地图渲染，必须依赖地图库。Leaflet 是轻量、易上手、兼容性好的首选——不用引入整套高德或百度 SDK，也不用处理复杂的鉴权和配额限制。
关键步骤：
- 通过 CDN 引入
leaflet.js和leaflet.css - 用
L.map()创建容器，L.tileLayer()加载免费瓦片（如 OpenStreetMap） - 绑定
map.on('click', ...)，从事件对象的e.latlng.lat和e.latlng.lng读坐标
注意：别用 map.addEventListener('click', ...) —— Leaflet 的事件系统不认原生 DOM 监听方式，会静默失败。
e.latlng 返回的是 WGS84 坐标系，不是 GCJ-02 或 BD-09
国内地图平台（高德、百度、腾讯）要求坐标必须经过加密偏移，否则在它们的地图上定位会偏移 300–500 米。Leaflet 默认返回的是标准 WGS84（GPS 设备原始坐标），直接填进高德 JS API 的 marker.setLngLat() 会错位。
立即学习“前端免费学习笔记（深入）”；
如果目标是对接国内平台：
- 高德：需调用
AMap.convertFrom(..., 'gps')转成 GCJ-02 - 百度：用官方
BMap.Convertor.translate()或成熟转换库（如gcoord）转 BD-09 - 别自己写偏移算法——公开公式已失效，且不同区域偏移非线性
调试时可在控制台打印 e.latlng.toString() 快速确认格式是否为 (lat, lng)，避免把 lng 当 lat 传反。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
移动端点击不准？加 tap: false 和防抖更稳
Leaflet 在 iOS/Android 上默认开启 tap 交互，但某些 WebView 或 Chrome for Android 会出现点击位置偏移、重复触发等问题。
初始化地图时显式关闭：
const map = L.map('map', {
tap: false,
zoomControl: true
});
再叠加简单防抖，避免手抖或误触：
let lastClick = 0;
map.on('click', function(e) {
const now = Date.now();
if (now - lastClick < 300) return;
lastClick = now;
console.log('拾取坐标:', e.latlng.lat.toFixed(6), e.latlng.lng.toFixed(6));
});
注意：不要用 setTimeout 防抖——它会让用户感觉“点下去没反应”，而时间间隔过滤更符合直觉。
坐标要存后端或导出？别漏掉 toFixed(6) 截断精度
JavaScript 浮点运算会导致经纬度出现超长小数（如 39.91234567890123），多数 GIS 系统只接受 6 位小数精度，多出的位数既无意义，还可能引发解析错误或入库失败。
导出或提交前统一处理：
-
lat.toFixed(6)和lng.toFixed(6)是安全底线 - 若用于地理围栏或距离计算，6 位 ≈ 0.1 米精度，够用；5 位 ≈ 1 米，视场景可降级
- 别用
Math.round(lat * 1000000) / 1000000—— 它在负数边界有符号误差，toFixed更可靠
真正容易被忽略的是：前端展示坐标时也应截断，否则用户复制粘贴到 Excel 或记事本里，会带一堆无效数字干扰后续使用。
