JS地理围栏验证后重定向失效，无控制台报错求助

问题背景 #

已在PowerApps中实现地理围栏验证功能，但改用JS开发面向公众的版本时，验证后的页面重定向逻辑无法触发。HTML部分可正常发起位置请求，控制台无报错，但重定向不执行。

错误代码示例 #

JavaScript代码：

function fun1() {
  let varGeofenceLon1 = 30.384219;
  let varGeofenceLon2 = 30.248352;
  let varGeofenceLat1 = -97.718391;
  let varGeofenceLat2 = -97.769386;

  navigator.geolocation.getCurrentPosition((position) => {
    let lon = position.coords.longitude;
    let lat = position.coords.latitude;
    let lontext = lon.toFixed(4);
    let latText = lat.toFixed(4);
  });

  // 这部分重定向逻辑无法执行
  if (
    lonText < varGeofenceLon1 &&
    lonText > varGeofenceLon2 &&
    latText < varGeofenceLat1 &&
    latText > varGeofenceLat2
  ) {
    window.location.href = "http://www.acss.powerappsportals.com/";
  }
}

HTML代码：

<html lang="en">
<head>
  <title>Test</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="TestMap.css">
</head>
<body>
  <button class="button" onclick="fun1()">Confirm Location</button>
</body>
</html>

问题根源 #

1. 异步执行顺序问题：navigator.geolocation.getCurrentPosition是异步API，会在后台获取位置数据，而回调函数外的条件判断和重定向代码会直接先执行，此时还未拿到位置数据。
2. 变量作用域问题：lonText、latText是回调函数内部的局部变量，外部代码无法访问，导致条件判断中的变量未定义，逻辑直接失效。
3. 变量名大小写不一致：代码中存在lontext（小写t）和lonText（大写T）的拼写错误，进一步导致变量无法正确引用。

修正方案 #

将条件判断和重定向逻辑移至getCurrentPosition的回调函数内部，确保拿到位置数据后再执行验证；同时修正变量名的拼写问题：

修正后的JavaScript代码 #

function fun1() {
  let varGeofenceLon1 = 30.384219;
  let varGeofenceLon2 = 30.248352;
  let varGeofenceLat1 = -97.718391;
  let varGeofenceLat2 = -97.769386;

  navigator.geolocation.getCurrentPosition((position) => {
    let lon = position.coords.longitude;
    let lat = position.coords.latitude;
    // 统一变量名大小写
    let lonText = lon.toFixed(4);
    let latText = lat.toFixed(4);

    // 将验证和重定向逻辑移到回调内部
    if (
      lonText < varGeofenceLon1 &&
      lonText > varGeofenceLon2 &&
      latText < varGeofenceLat1 &&
      latText > varGeofenceLat2
    ) {
      window.location.href = "http://www.acss.powerappsportals.com/";
    }
  });
}

修正后的HTML代码（修复标签闭合问题） #

<html lang="en">
<head>
  <title>Test</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="TestMap.css">
</head>
<body>
  <button class="button" onclick="fun1()">Confirm Location</button>
</body>
</html>

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