页面加载时弹出Alert展示用户地理位置数据的实现需求

原代码存在的问题 #

• getLocation 是异步操作，直接用 alert 调用它会得到 undefined，因为 getCurrentPosition 不会立即返回结果
• 未定义变量 x，showPosition 里的 x.innerHTML 会触发报错
• 没有绑定页面加载完成的事件，代码会在页面未完全加载时就执行，且逻辑无法实现预期效果

修正后的代码 #

<script>
// 等待页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  getLocation();
});

function getLocation() {
  if (navigator.geolocation) {
    // 调用获取位置，同时处理成功和失败情况
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else {
    alert("当前浏览器不支持地理位置获取");
  }
}

function showPosition(position) {
  // 用alert展示地理位置
  alert(`你的位置信息：
纬度：${position.coords.latitude}
经度：${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;
  }
}
</script>

代码说明 #

• 用 DOMContentLoaded 事件确保代码在页面完全加载后执行
• 新增 showError 函数处理用户拒绝授权、位置无法获取等异常情况
• 在 showPosition 中直接用 alert 格式化展示纬度和经度信息
• 移除了未定义的 x 变量，避免报错

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