如何将函数内的latitude和longitude变量全局化以在外部显示

你的代码存在两个核心问题：

• latitude 和 longitude 是 getLatLon 函数的局部变量，函数外部无法直接访问
• navigator.geolocation.getCurrentPosition 是异步操作，外部的 document.write 会在位置信息获取完成前执行，就算变量全局了也拿不到有效值

下面是两种可行的解决方式：

方式一：全局变量 + 回调内触发显示 #

把变量提升到全局作用域，同时将显示逻辑放到位置获取完成的回调里执行：

// 全局作用域声明变量
let latitude;
let longitude;

navigator.geolocation.getCurrentPosition(getLatLon);

function getLatLon(position) {
    latitude = position.coords.latitude;
    longitude = position.coords.longitude;
    // 拿到位置后再执行显示
    showLocation();
}

function showLocation() {
    // 推荐用DOM操作替代document.write
    document.body.innerHTML += `<p>Latitude is ${latitude}</p>`;
    document.body.innerHTML += `<p>Longitude is ${longitude}</p>`;
}

方式二：用Promise封装（更优雅的异步处理） #

不需要全局变量，通过Promise封装地理位置获取逻辑，用现代异步语法处理结果：

function fetchLocation() {
    return new Promise((resolve, reject) => {
        navigator.geolocation.getCurrentPosition(
            (pos) => resolve({
                lat: pos.coords.latitude,
                lon: pos.coords.longitude
            }),
            (err) => reject(err)
        );
    });
}

// 用.then处理异步结果
fetchLocation()
    .then(coords => {
        document.body.innerHTML += `<p>Latitude is ${coords.lat}</p>`;
        document.body.innerHTML += `<p>Longitude is ${coords.lon}</p>`;
    })
    .catch(err => console.error('获取位置失败:', err.message));

额外提醒 #

document.write 在现代前端开发中不推荐使用（会覆盖页面内容或导致渲染问题），建议通过DOM元素的textContent或innerHTML来更新页面内容。

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