如何将GPS获取的Latitude、Longitude数据填入HTML输入框？

核心修改思路 #

把原来用innerHTML插入文本的逻辑，改成直接设置input标签的value属性——这是输入框接收数据的正确方式，而非修改元素内部HTML。

具体步骤 #

1. 给Input标签添加唯一标识
   给页面里的纬度、经度输入框分别加上id属性，确保JS能精准定位：

   <input type="text" id="latitudeInput" placeholder="纬度">
   <input type="text" id="longitudeInput" placeholder="经度">
   

2. 修改地理定位JS代码
   替换原有的innerHTML操作，改为给input的value赋值：

   // 触发定位请求
   function getLocation() {
     if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(showPosition, showError);
     } else {
       alert("当前浏览器不支持地理定位功能");
     }
   }
   
   // 定位成功后填充数据
   function showPosition(position) {
     // 给纬度输入框赋值
     document.getElementById("latitudeInput").value = position.coords.latitude;
     // 给经度输入框赋值
     document.getElementById("longitudeInput").value = position.coords.longitude;
   }
   
   // 定位失败的错误处理（可选但建议保留）
   function showError(error) {
     switch(error.code) {
       case error.PERMISSION_DENIED:
         alert("你拒绝了位置权限请求，无法获取经纬度");
         break;
       case error.POSITION_UNAVAILABLE:
         alert("无法获取当前位置信息");
         break;
       case error.TIMEOUT:
         alert("位置请求超时，请重试");
         break;
       case error.UNKNOWN_ERROR:
         alert("定位时发生未知错误");
         break;
     }
   }
   

3. 绑定触发事件
   加一个按钮或者其他交互元素来触发定位，比如：

   <button onclick="getLocation()">获取当前经纬度</button>
   

常见问题排查 #

• 确认input的id和JS中getElementById的参数完全一致（大小写敏感）
• 检查浏览器是否允许当前网站获取位置权限（地址栏通常会有权限提示）
• 必须在HTTPS环境下测试（本地开发用localhost或127.0.0.1不受限制），现代浏览器禁止HTTP网站调用地理定位API

内容的提问来源于stack exchange，提问作者You dunno