HTML表单无原生geolocation类型，须用JavaScript调navigator.geolocation获取坐标填入隐藏域；需用户触发、HTTPS环境、完善错误处理；若需地址须后端调逆地理编码API；真机测试注意iOS/Android权限及浏览器限制。
HTML 表单里不能直接用 input type="geolocation"
浏览器原生表单没有地理定位输入类型，input 标签所有合法 type 值里压根不存在 geolocation。硬写进去，浏览器会降级成 text，还可能触发控制台警告 The specified value "geolocation" is not a valid key identifier。
真实可行路径只有一条：用普通表单字段 + JavaScript 调用 navigator.geolocation 获取坐标，再填入隐藏域或可见输入框。
怎样用 navigator.geolocation.getCurrentPosition() 填坐标到表单
这是最常用、兼容性最好的方式（IE10+，现代浏览器全支持），但必须由用户主动触发（比如点“获取位置”按钮），不能页面一加载就自动执行——否则多数浏览器会静默拒绝。
- 必须在 HTTPS 或 localhost 环境下运行，HTTP 页面调用会直接失败，错误是
Geolocation not supported or permission denied - 建议用两个
input：一个type="hidden"存latitude，一个存longitude，避免用户误改 - 别省略错误回调，常见失败原因包括用户拒接授权、GPS 关闭、飞行模式、Chrome 在 iframe 里禁用定位
document.getElementById('get-location').addEventListener('click', () => {
navigator.geolocation.getCurrentPosition(
(pos) => {
document.getElementById('lat').value = pos.coords.latitude.toFixed(6);
document.getElementById('lng').value = pos.coords.longitude.toFixed(6);
},
(err) => {
console.error('定位失败:', err.message);
alert('无法获取位置，请检查权限或网络');
}
);
});
用户要的是地址，不是经纬度？得调用逆地理编码 API
单纯给经纬度对大多数表单没用，用户需要的是“北京市朝阳区建国路8号”这种可读地址。这一步必须走服务端或第三方 API，前端 JS 无法绕过跨域和密钥限制直接调用。
立即学习“前端免费学习笔记（深入）”；
- 浏览器端直接请求高德/腾讯/Mapbox 的逆地理编码接口，会因缺少
Referer白名单或未传key被拒绝 - 安全做法：前端传坐标给后端，后端用服务端密钥调 API，再把地址回传；或者用前端 SDK（如高德 JSAPI），但需提前在控制台配置域名白名单
- 注意配额：免费额度有限，高频提交表单容易触发
AMap.Error: Too Many Requests
移动端真机测试时的典型坑
开发时在 Chrome 桌面模拟地理位置一切正常，一上真机就失效，大概率卡在这几个地方：
- iOS Safari 需要用户在「设置 → Safari → 定位服务」里手动开启，且设为“允许”而非“仅在使用期间”
- Android 微信内置浏览器默认禁用
navigator.geolocation，必须引导用户跳转到系统浏览器打开 - 部分国产 Android 浏览器（如 QQ 浏览器）会把定位权限默认关死，且不弹提示，只返回超时错误
POSITION_UNAVAILABLE - 不要依赖
enableHighAccuracy: true，真机上它会让定位慢好几秒甚至失败，普通场景设为false更稳
地理定位不是开关一开就能用的功能，它横跨权限模型、网络策略、设备固件、浏览器实现多个层面。最稳妥的做法是：始终提供手动填写地址的备选入口，并明确告知用户“获取位置”按钮的作用和前提条件。
