最近在做一个地理相关的内部工具时频繁需要处理经纬度格式转换和距离计算的问题。每次都要打开各种在线工具，来回切换页面实在麻烦。正好最近在尝试用 AI 辅助开发，就想着能不能让 AI 帮我快速实现一个自用的工具。

为什么会有这个需求？怎么说呢，

做地图相关的开发。经常会遇到这样的场景：从数据库里导出的坐标是十进制度格式，但客户要求展示为度分秒格式。反过来从 GPS 设备获取的坐标可能是 DMS 格式，需要转成 DD 格式才能存储。

User Pain Points:

• 每次都得复制粘贴，耗时且易出错。
• 在线工具常带广告，加载慢；又有限流、功能受限，

传统方案的问题与痛点

• 方案一：直接用现成的在线工具
• 方案二：写一个命令行脚本
• 方案三：做一个简单的 Web 工具

说到方案一。直接用现成的在线工具

优点： 零成本，打开即用。缺点： 需要切换页面、复制粘贴、不能批量处理；部分网站有限流或广告影响体验。

说到方案二，写一个命令行脚本

优点： 可以批量处理、速度快。缺点： 不够直观。每次都要打开终端，对团队其他成员友好度低。

至于方案三。做一个简单的 Web 工具

优点： 可视化操作、易分享，可集成到内部程序中。缺点： 需要花时间开发；但相对更符合团队使用习惯。

最终选择了方案三。因为考虑到这个工具可能不止我自己用，团队里其他人也需要，而 Web 页面是最友好的形式。

A.I. 辅助开发过程概览

I 对 A.I. 写代码持怀疑态度，但这次决定试一次看能否配合 A.I. 完成整个工具。我先给出了详细需求，接下来不断调优。

# 第一轮：需求描述 & 初始代码生成

你是一名资深前端工程师。请根据下方规格，生成一个独立的单文件 HTML 工具。说到要求，- 生产级别代码，质量高，可读性强
- 严格实现「功能列表」中的所有功能，不得省略、不得用 placeholder 代替
- 所有使用者可见文案必须使用 i18n 机制
功能列表的观点是，1) DD→DMS 转换
2) DMS→DD 转换
...

A.I. 第一次生成代码整体结构不错。但出现了以下问题：

# 问题一：输入框联动逻辑不完善

function onDDChange{
var lat=parseFloat.value);var lon=parseFloat.value);updateHemispheres;if){
document.getElementById.value=ddToDmsStr;话说回来，}else{
document.getElementById.value='';}
}

• A.I. 只在 DD 输入框触发转换，而 DMS 输入框没有同步更新；导致双向输入时数据不同步。

# 问题二：DMS 解析不够健壮

function dmsStrToDd{
// …var normalized=str.replace
.replace
.replace
.trim;parts=normalized.split.filter{return p.length>;})，}

• D.M.S 格式多种分隔符未被统一识别；其实，导致某些输入报错，老实说，

# 问题三：缺少输入校验

• A.I. 没有对极端值进行校验；若超范围则返回 NaN 或错误结果。

# 第二轮：与 A.I 的交互调优过程

User Prompt	A.I 回复 & 调整动作
"请改进 dmsStrToDd 函数。让它能识别空格分隔和标准 °'\" 符号，并加入格式校验。"	"已调整解析逻辑，并增加异常抛出与提示。"
"添加防抖函数 debounce，减少连续输入触发频率。"	"已在 onDDChange/onDMSChange 内部包装 debounce。"
"城市坐标按钮点击后需要同时更新 DD 与 DMS 两个输入框。"	"已修改 applyCity 函数，实现双向更新。"

虽然、空值判断往往不够严谨；变量命名和函数组织风格仍显杂乱，需要手工统一整理。

# 关键技术实现细节说明

# DD → DMS 转换算法

function ddToDmsStr {
var hemi = isLat?
:，dd = Math.abs;var d = Math.floor;var mFloat = * 60;
var m = Math.floor;
var s = * 60;return d + '°' + String.padStart + '\'' + s.toFixed.padStart + '"' + hemi;}

# DMS → DD 转换算法

function dmsStrToDd {
// normalize separators and remove non-numeric symbols except negative sign and hemisphere letter
const cleaned = str.replace
.replace
.replace
.trim;const parts = cleaned.split.filter;if{ // single number -> decimal degrees
return parseFloat;}
const d=parseFloat。m=parseFloat,s=parseFloat;let dd=d + m/60 + s/3600;// handle hemisphere sign if present at end of string
const hemiMatch=str.match;if{
if)) dd=-Math.abs;else dd=Math.abs;不过，}
return dd;}

# Haversine 距离计算公式实现

const R_EARTH=6371;// km
function haversine{
const rad==>x*Math.PI/180;说起来，const dLat=rad,dLon=rad;const a=Math.sin**2 +
Math.cos)*Math.cos)*Math.sin**2;const c= 6*Math.atan/Math.sqrt);return R_EARTH*c;}

# 方位角计算实现并归一化至 [0°。360°)

function bearing{
const rad=x=>x*Math.PI/180,deg=x=>x*180/Math.PI;const y=Math.sin)*Math.cos);const x=Math.cos)*Math.sin) -
Math.sin)*Math.cos)*Math.cos);其实，let brng=Math.atan;brng=+360)%360;return brng.toFixed;}

# 为何采用纯前端单文件 HTML？——解决部署与维护痛点

• 无后端逻辑，无数据持久化——减少运维成本；仅需托管静态文件即可运行，无需服务器设置。.

单文件便于共享—只需将该 html 文件发送给同事。即可直接在浏览器打开，无需安装依赖或打包步骤。.

支持 i18n 与 CSS 变量主题—自动适配程序深色模式，可切换中英文。.

可离线运行—保存为本地文件就可以使用，不依赖网络连接。.

---

---