经纬志
首页 / Leaflet / 使用示例

坐标拾取

鼠标移动时实时读出经纬度、Web 墨卡托米制坐标与容器像素,点击可落点并复制。

Leaflet 1.9.4 · 更新 2026-10-28
源码与运行效果
运行效果

说明

坐标来自 mousemove 事件对象的三个字段:latlng 是 WGS84 经纬度,containerPoint 是相对地图容器的像素位置。 墨卡托坐标则由 map.project(latlng, zoom) 现算, 返回值单位为米,等价于 EPSG:3857。

落点用带常驻 tooltip 的 divIcon 标记,点击标记自身即删除。 mousemove 只更新文本,不做重计算,所以不需要节流; 如果要在里面做投影换算或发请求,应当改成 throttle 包装。

读数来源用途
经纬度e.latlng入库、分享、与 GPS 设备对齐
墨卡托米制map.project(latlng, z)与 3857 数据、切片服务对接
容器像素e.containerPoint自定义叠加层定位、截图标注
缩放级别map.getZoom()换算比例尺与瓦片层级
落点集合layerGroup批量导出或生成路径

刻度显示的数字不是「地图中心」而是「鼠标位置」。页面关闭缩放动画 或使用 zoomSnap: 1 时,project 的结果才与瓦片编号严格对应, 否则会出现半像素偏移。