Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 

Repository files navigation

经纬度测距地理工具(Geographic Location Testing Website)

基于 Leaflet + 高德地图瓦片 的纯前端离线坐标拾取、球面测距工具,无后端,数据仅存储在浏览器本地。

✨ 功能清单

  1. 地图拾取坐标 点击地图自动获取 WGS84 经纬度,同时展示十进制度 / 度分秒两种格式,一键复制坐标。
  2. 两点球面测距 使用 Haversine 大圆距离算法计算地表真实距离,自动绘制两点连线,支持一键清除测距标记。
  3. 本地数据持久化
    • 拾取历史记录(最多保存120条,带时间戳,可一键定位回地图点位)
    • 自定义命名收藏点位,支持删除收藏
    • 全部数据存储在浏览器 localStorage,不上传任何服务器
  4. 数据备份与恢复 导出全部历史、收藏为 JSON 文件备份;支持导入 JSON 恢复记录。
  5. 移动端自适应 手机竖屏控制面板底部、横屏自动适配,兼容刘海屏安全区,触摸按钮放大防误触。

📁 项目文件结构

🚀 本地运行方法

方式1:推荐 VSCode Live Server

  1. VSCode 安装插件 Live Server
  2. 打开项目文件夹,右下角点击 Go Live,自动打开网页

方式2:直接浏览器打开

找到 index.html 文件,双击使用 Chrome / Edge 浏览器打开(需要联网加载地图资源)

🌐 在线访问(GitHub Pages)

本项目部署在 GitHub Pages,访问地址: https://你的github用户名.github.io/你的仓库名/

📖 使用说明

  1. 拾取坐标模式(默认) 点击地图任意位置,自动记录点位到历史,可复制、加入收藏。
  2. 两点测距模式 切换单选框到「两点测距」,第一次点击为起点A,第二次点击为终点B,自动计算直线地表距离。
  3. 历史/收藏列表点击「定位」可快速跳转至对应坐标;支持清空历史、删除收藏。
  4. 底部导出/导入按钮可备份迁移你的坐标记录。

🛠️ 技术栈

  • 地图框架:Leaflet 1.9.4(国内 BootCDN 加速)
  • 地图瓦片:高德矢量地图(国内访问稳定)
  • 存储:浏览器 localStorage
  • 前端:原生 HTML / CSS / JavaScript,无任何框架依赖

⚠️ 注意事项

  1. 必须联网才能加载地图底图与地图库;
  2. 无痕浏览器窗口关闭后会清空所有本地记录,建议使用普通窗口;
  3. 坐标系标准 WGS84(GPS通用),高德/百度地图需自行坐标转换;
  4. 清除浏览器站点数据会删除全部历史与收藏记录,导出JSON可提前备份。

Releases

Packages

Contributors

Languages