### [HTML 表单自动填地理位置：必须脚本触发](https://www.huociguo.com/article/1737)

**Published:** 2026-10-02T09:45:26

**Author:** 米了

**Excerpt:** 外卖、打卡类表单常要求提交时带上当前位置。这个能力不存在自动填充，必须由脚本显式调用 Geolocation …

外卖、打卡类表单常要求提交时带上当前位置。这个能力不存在自动填充，必须由脚本显式调用 Geolocation API，且满足三个硬性条件。

![地图上插着彩色图钉](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-1078850.jpeg)

位置信息只能由脚本在用户授权后取得。图片来自 Pexels。

## 条件一：安全上下文

Geolocation 只在 https 或 localhost 可用。http 页面里 navigator.geolocation 直接是 undefined，调用前先判存：

if (!('geolocation' in navigator)) { /\* 降级处理 \*/ }

## 条件二：用户手势触发

权限请求必须由点击等用户交互触发。页面加载完成就弹定位授权，多数浏览器直接拒绝，还会拉低后续授权率。把取位置的动作绑在提交按钮上是自然选择。

## 条件三：超时保护

navigator.geolocation.getCurrentPosition(ok, fail, {
  timeout: 8000,
  maximumAge: 60000
});

室内或弱信号环境定位可能十几秒不返回，timeout 兜底防止表单卡死。maximumAge 允许复用一分钟内的缓存位置，减少等待。

## 填入表单的方式

成功后把经纬度写进隐藏字段，再走正常提交流程：

function ok(pos) {
  form.lat.value = pos.coords.latitude.toFixed(6);
  form.lng.value = pos.coords.longitude.toFixed(6);
  form.submit();
}

注意 form.submit() 不触发 submit 事件，校验逻辑要在此之前手动执行。fail 回调里给用户明确的失败提示，并提供手动选择位置的入口，定位权限被拒不该是死路。

**Tags:** Geolocation, 浏览器权限, 经纬度, 表单提交, 隐藏字段

**Categories:** HTML5

---