天气APP开发遇Uncaught ReferenceError：latitude未定义问题求助

问题 #

开发天气应用时，遇到Uncaught ReferenceError: latitude is not defined错误。应用计划通过两种方式调用API：用户允许定位时用经纬度，或通过城市名称搜索。已在代码中给latitude和longitude赋值为position.coords对应属性，但在URL字符串中动态使用这两个值时出错，怀疑是作用域问题，寻求原因和解决方法。

当前JavaScript代码：

let LocationInfo = document.querySelector( ".location-weather" );
const cityInput = document.getElementById( "Search-Bubble" );
const searchButton = document.getElementById( "SearchBtn" );

window.addEventListener( "load", () => {
    let latitude;
    let longitude;
    if ( navigator.geolocation ) {
        navigator.geolocation.getCurrentPosition( ( position ) => {
            latitude = position.coords.latitude;
            longitude = position.coords.longitude;
        })
    }
});

const apiCoordsUrl = `https://api.openweathermap.org/data/2.5/onecall?lat=${latitude}&lon=${longitude}&exclude=minutely,alerts&units=imperial&appid=${apiTag}`;

async function getCoordsWeatherInfo() {
    const response = await fetch( apiCoordsUrl );
    const data = await response.json();
    this.unveilWeather( data );
};
console.log( getCoordsWeatherInfo() );

问题原因 #

1. 作用域隔离：latitude和longitude定义在window.load事件的回调函数内部，属于局部变量，外部的apiCoordsUrl无法访问这两个变量。
2. 异步执行顺序：navigator.geolocation.getCurrentPosition是异步API，而apiCoordsUrl是同步声明的——此时经纬度还未被赋值，就算作用域没问题，拼接出的URL也会包含undefined值。
3. 变量初始化时机：即便把经纬度变量提升到全局，同步构建的apiCoordsUrl也会在异步赋值完成前就完成字符串拼接，结果依然不符合预期。

解决方法 #

核心思路是拿到经纬度后再构建URL并发起请求，以下是两种可行的调整方案：

方案1：将请求逻辑嵌入定位成功回调

let LocationInfo = document.querySelector( ".location-weather" );
const cityInput = document.getElementById( "Search-Bubble" );
const searchButton = document.getElementById( "SearchBtn" );

window.addEventListener( "load", () => {
    if ( navigator.geolocation ) {
        navigator.geolocation.getCurrentPosition( async ( position ) => {
            // 拿到经纬度后再构建请求URL
            const latitude = position.coords.latitude;
            const longitude = position.coords.longitude;
            const apiCoordsUrl = `https://api.openweathermap.org/data/2.5/onecall?lat=${latitude}&lon=${longitude}&exclude=minutely,alerts&units=imperial&appid=${apiTag}`;
            
            // 发起请求并处理数据
            const response = await fetch( apiCoordsUrl );
            const data = await response.json();
            unveilWeather( data ); // 直接调用，无需this（除非unveilWeather是对象方法）
        })
    }
});

// 假设你已定义的天气数据渲染函数
function unveilWeather(data) {
    // 处理并展示天气数据的逻辑
}

方案2：将经纬度作为参数传入请求函数

let LocationInfo = document.querySelector( ".location-weather" );
const cityInput = document.getElementById( "Search-Bubble" );
const searchButton = document.getElementById( "SearchBtn" );

window.addEventListener( "load", () => {
    if ( navigator.geolocation ) {
        navigator.geolocation.getCurrentPosition( ( position ) => {
            const latitude = position.coords.latitude;
            const longitude = position.coords.longitude;
            // 把经纬度传给请求函数
            getCoordsWeatherInfo(latitude, longitude);
        })
    }
});

async function getCoordsWeatherInfo(latitude, longitude) {
    // 动态构建请求URL
    const apiCoordsUrl = `https://api.openweathermap.org/data/2.5/onecall?lat=${latitude}&lon=${longitude}&exclude=minutely,alerts&units=imperial&appid=${apiTag}`;
    const response = await fetch( apiCoordsUrl );
    const data = await response.json();
    unveilWeather( data );
};

// 天气数据渲染函数
function unveilWeather(data) {
    // 处理并展示天气数据的逻辑
}

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