浏览器通过navigator.geolocation.getcurrentposition获取位置后需手动写入表单再提交，不可直接绑定；必须阻断默认提交、处理异步回调、设置超时与状态锁，并注意https、权限引导及坐标精度校验。
用 navigator.geolocation.getCurrentPosition 获取位置再提交表单
浏览器原生支持地理位置获取，但不能直接“绑定”到表单提交动作上——必须手动触发定位、等结果返回后再发请求。否则表单会跳过定位直接提交，latitude 和 longitude 字段为空。
常见错误是把 getCurrentPosition 放在 submit 事件里却没阻断默认行为，或者没处理异步回调就直接提交了表单。
- 必须在
submit事件处理器中调用event.preventDefault() - 定位成功后，把坐标写入隐藏字段（如
<input type="hidden" name="lat">），再调用form.submit() - 失败时要给用户明确提示，比如弹出
alert或在页面显示错误信息"无法获取位置，请检查浏览器权限" - 不要在
getCurrentPosition外层直接读取position.coords.latitude——它还没回来
为什么不能用 async/await 直接 await getCurrentPosition
getCurrentPosition 不是 Promise API，它只接受 success 和 error 回调函数，原生不支持 await。强行包装成 Promise 是可行的，但要注意兼容性与错误传播。
Chrome、Firefox、Edge 现代版本都支持，但 Safari 在某些 iOS 版本中对非安全上下文（HTTP）会静默拒绝，且不抛错——只会进 error 回调，error.code 可能是 1（PERMISSION_DENIED）或 2（POSITION_UNAVAILABLE）。
- 推荐封装：用
new Promise((resolve, reject) => { ... })包一层，success 调resolve，error 调reject - 超时控制很重要：加
timeout: 5000选项，避免用户一直等黑屏 - 别忽略
maximumAge和enableHighAccuracy参数——前者影响缓存策略，后者可能显著延长响应时间或失败率
表单提交时如何避免重复请求或丢失坐标
用户快速连点提交按钮，或网络较慢时定位刚返回就又点了第二次，容易导致坐标覆盖、重复提交、甚至前后两次坐标不一致。
关键不是“防抖”，而是状态锁 + 按钮禁用 + 表单锁定。
- 点击提交后立即将按钮设为
disabled，并改文字为“定位中…” - 用一个布尔变量（如
isSubmitting = true）标记是否正在处理，再次 submit 事件直接 return - 定位失败后记得恢复按钮状态和
isSubmitting = false，否则用户再也点不动了 - 如果表单含其他必填字段，建议在定位完成后再校验整体有效性，而不是在定位前就报“请填写地址”
后端接收时注意坐标的精度和格式
前端拿到的 position.coords.latitude 是浮点数，典型值如 39.9042，但实际精度可能达小数点后 7 位。后端不做截断或校验，容易存入数据库时报错（比如 MySQL 的 DECIMAL(10,6) 存不下）。
更隐蔽的问题是：不同设备返回的坐标系可能不一致（WGS84 是标准，但个别 Android 厂商定制 ROM 有偏差），不过绝大多数场景可默认信任 getCurrentPosition 输出。
- 前端建议用
.toFixed(6)统一保留 6 位小数，避免传输冗余字符串 - 后端应校验数值范围：
latitude在-90到90，longitude在-180到180 - 不要把坐标当字符串拼 SQL，务必用参数化查询，防止注入
- 如果业务需要地理围栏或距离计算，后端最好统一用 PostGIS 或类似扩展，别在应用层手算球面距离
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
