网页加载时获取经纬度报错：Uncaught ReferenceError: getLocation is not defined

看起来你遇到的核心问题是两个：一是getLocation函数未被识别，二是页面加载时这个函数没触发。咱们一步步来排查修复：

一、先搞定「getLocation is not defined」的报错 #

这个报错通常逃不开3种常见原因，对应不同的修复方式：

1. 函数压根没定义 #

先检查你的代码里是不是真的写了getLocation函数，基础的函数结构应该是这样的：

function getLocation() {
  if (navigator.geolocation) {
    // 调用浏览器的地理定位API
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    alert("你的浏览器不支持地理定位功能");
  }
}

// 获取到位置后的处理函数
function showPosition(position) {
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;
  console.log(`当前纬度：${latitude}，当前经度：${longitude}`);
  // 这里可以把经纬度用到你的地图或其他业务逻辑里
}

要是没写这段，先补上这个基础函数再说。

2. 函数定义在调用之后 #

如果你的getLocation()调用写在了函数定义的前面，就会出现“未定义”的错误。比如：
❌ 错误写法（调用在前，定义在后）：

<script>
  // 页面加载时调用函数
  window.onload = function() {
    getLocation(); // 这时候getLocation还没被定义，肯定报错
  };
</script>
<script>
  // 后面才定义函数
  function getLocation() { /* ... */ }
</script>

✅ 正确写法（先定义函数，再调用）：

<script>
  // 先把函数写好
  function getLocation() { /* ... */ }
  function showPosition(position) { /* ... */ }
</script>
<script>
  // 再写调用逻辑
  window.onload = function() {
    getLocation();
  };
</script>

3. Google Maps脚本的async/defer拖了后腿 #

你代码里用了async defer加载Google Maps脚本，如果你的getLocation函数依赖Maps API，或者把函数写在了这个异步脚本里，就会导致函数加载滞后，调用时找不到。解决方法分两种：

• 如果函数不依赖Maps API：把函数定义放在单独的<script>标签里，且放在Maps脚本之前
• 如果函数依赖Maps API：把getLocation的调用放在Maps API的加载回调里，比如：

<!-- 注意要加上callback参数指定回调函数 -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&callback=initMap"></script>
<script>
  // Maps API加载完成后才执行这个回调
  function initMap() {
    getLocation(); // 这时候调用就不会找不到函数了
  }

  function getLocation() { /* ... */ }
  function showPosition(position) { /* ... */ }
</script>

二、确保页面加载时函数自动运行 #

解决了函数定义问题后，还要保证页面加载时自动触发getLocation，常用的几种靠谱方式：

1. 使用window.onload #

这个方法会等所有资源（图片、脚本、样式）都加载完成后再执行：

window.onload = function() {
  getLocation();
};

2. 使用DOMContentLoaded事件 #

如果不需要等图片等资源，只需要DOM结构加载完成就执行，用这个更高效：

document.addEventListener('DOMContentLoaded', function() {
  getLocation();
});

3. 直接在<body>的onload属性里调用 #

这种写法更直接，适合简单场景：

<body onload="getLocation()">
  <!-- 页面内容 -->
</body>

完整可运行示例代码 #

把上面的点整合起来，给你一个完整的示例，直接替换API密钥就能用：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>获取当前经纬度</title>
  <script>
    // 先定义核心函数
    function getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
      } else {
        alert("你的浏览器不支持地理定位");
      }
    }

    function showPosition(position) {
      const lat = position.coords.latitude;
      const lon = position.coords.longitude;
      console.log(`当前位置：纬度 ${lat}，经度 ${lon}`);
      // 这里可以把经纬度传给Google Maps初始化逻辑
    }

    // 处理定位失败的情况
    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;
      }
    }

    // DOM加载完成后自动调用
    document.addEventListener('DOMContentLoaded', function() {
      getLocation();
    });
  </script>
  <!-- 替换成你的Google Maps API密钥 -->
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=你的API密钥"></script>
</head>
<body>
  <h1>获取当前位置</h1>
  <p>打开浏览器控制台查看经纬度信息</p>
</body>
</html>

最后提醒一句：现代浏览器要求地理定位功能必须在HTTPS环境下使用（localhost除外），测试的时候要注意环境哦。

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