地理定位经纬度无法传递至getJSON函数，请求排查问题与函数结构

嘿，我一眼就看出问题所在啦——这是异步操作的执行顺序搞的鬼！

问题根源 #

navigator.geolocation.getCurrentPosition()是个异步函数：它不会立刻返回定位结果，而是要等浏览器拿到位置信息后，才会调用你指定的回调函数（比如showPosition）。但你现在在页面加载时同时调用了getLocation()和apiCall()，这就导致apiCall()会在定位完成、经纬度变量被赋值之前就执行了，自然拿不到有效的lati和loni。

修正方案 #

核心思路就是：等定位成功拿到经纬度后，再调用apiCall()。具体有两种实现方式，推荐第二种更健壮的写法：

方式1：利用全局变量（简单直观）

$(window).load(function() {
  getLocation(); // 只启动定位，apiCall在定位成功后触发
}); 

var x = document.getElementById("demo");
var lati, loni; // 声明全局变量存储经纬度

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else { 
    x.innerHTML = "该浏览器不支持地理定位功能";
  }
}

// 定位成功后的回调：赋值经纬度，再调用API
function showPosition(position) {
  lati = position.coords.latitude;
  loni = position.coords.longitude;
  x.innerHTML = "纬度: " + lati + "<br>经度: " + loni;
  
  // 现在经纬度已经就绪，放心调用API
  apiCall();
}

// 定位失败的错误处理（建议加上，提升用户体验）
function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "你拒绝了地理定位请求，无法获取天气信息";
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "当前位置信息不可用";
      break;
    case error.TIMEOUT:
      x.innerHTML = "定位请求超时，请稍后重试";
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "定位时发生未知错误";
      break;
  }
}

function apiCall() {
  // 这里可以正常使用lati和loni了
  $.getJSON(`你的天气API地址?lat=${lati}&lon=${loni}`, function(data) {
    // 处理返回的天气数据，比如渲染到页面
    console.log("当前温度：", data.main.temp);
    console.log("天气状况：", data.weather[0].description);
  });
}

方式2：直接传参（更优雅，避免全局变量污染）

把经纬度作为参数直接传给apiCall，不需要依赖全局变量：

// ... 前面的getLocation、showError函数和上面一致 ...

function showPosition(position) {
  const lati = position.coords.latitude;
  const loni = position.coords.longitude;
  x.innerHTML = "纬度: " + lati + "<br>经度: " + loni;
  
  // 直接把经纬度作为参数传入apiCall
  apiCall(lati, loni);
}

function apiCall(lat, lon) {
  $.getJSON(`你的天气API地址?lat=${lat}&lon=${lon}`, function(data) {
    // 处理天气数据
  });
}

额外提醒 #

• 测试时记得用HTTPS环境（部分浏览器在HTTP下会禁用地理定位），或者本地开发用localhost也可以。
• 一定要加上定位失败的错误处理，不然用户拒绝定位后页面会毫无反应，体验很差。

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