如何将变量传入.ready()函数？及geoFindMe经纬度函数技术咨询

嘿，我来帮你搞定这两个JavaScript相关的问题！

jQuery的$(document).ready()是用来等待DOM加载完成后执行代码的，要给它的回调传变量，其实有几种实用的方式：

• 直接访问外部作用域变量
  如果变量是在.ready()外面定义的，回调函数可以直接读取它，这是最常用的方式：

// 提前定义好要传递的变量
var appConfig = { theme: "dark", version: "1.0" };

$(document).ready(function() {
  // 直接使用外部变量
  console.log("当前主题：", appConfig.theme);
});

• 用闭包封装参数
  如果需要动态生成参数，或者想更清晰地传递参数，可以把回调写成带参数的函数，通过闭包传递：

// 定义一个接受参数的回调生成函数
function createReadyCallback(userInfo) {
  return function() {
    console.log("用户ID：", userInfo.id);
    console.log("用户名：", userInfo.name);
  };
}

// 准备要传递的参数
var currentUser = { id: 123, name: "Alice" };

// 把参数传入并注册ready回调
$(document).ready(createReadyCallback(currentUser));

• 不推荐：全局变量
  虽然可以把变量挂在window上让ready回调访问，但全局变量容易引发命名冲突，除非万不得已别用这种方式。

你的基础代码已经搞定了核心的定位逻辑，我帮你补全并优化了一下，比如增加错误处理、优化字符串拼接，还加了地图预览功能：

function geoFindMe() { 
  var output = document.getElementById("out"); 
  if (!navigator.geolocation){ 
    output.innerHTML = "<p>你的浏览器不支持地理定位功能</p>"; 
    return; 
  } 

  // 定位成功后的处理
  function success(position) { 
    var latitude = position.coords.latitude; 
    var longitude = position.coords.longitude; 

    // 用ES6模板字符串代替拼接，更简洁易读
    output.innerHTML = `<p>纬度：${latitude}° <br>经度：${longitude}°</p>`; 

    // 可选：添加静态地图预览
    var mapImg = document.createElement('img');
    // 调用OpenStreetMap的静态地图API
    mapImg.src = `https://tile.openstreetmap.org/15/${Math.floor(longitude)}/${Math.floor(latitude)}.png`;
    mapImg.alt = `当前位置地图：${latitude}, ${longitude}`;
    mapImg.style.width = "300px";
    mapImg.style.height = "300px";
    output.appendChild(mapImg);
  } 

  // 定位失败的处理（之前的代码没加这个，必须补上！）
  function error(errorMsg) { 
    switch(errorMsg.code) {
      case errorMsg.PERMISSION_DENIED:
        output.innerHTML = "<p>你拒绝了定位请求，无法获取位置</p>";
        break;
      case errorMsg.POSITION_UNAVAILABLE:
        output.innerHTML = "<p>无法获取当前位置</p>";
        break;
      case errorMsg.TIMEOUT:
        output.innerHTML = "<p>定位请求超时</p>";
        break;
      default:
        output.innerHTML = "<p>定位时发生未知错误</p>";
    }
  } 

  // 发起定位请求，开启高精度模式
  navigator.geolocation.getCurrentPosition(success, error, {
    enableHighAccuracy: true,
    timeout: 10000, // 10秒超时
    maximumAge: 0 // 不使用缓存位置
  });
}

优化点说明： #

• 补充了详细的错误处理，覆盖用户拒绝、定位失败、超时等场景
• 用模板字符串替代传统的字符串拼接，代码更清爽
• 添加了静态地图预览，让定位结果更直观
• 给定位请求加了超时、高精度等配置，提升体验

如果想在DOM加载完成后自动执行定位，并在.ready()的逻辑中使用经纬度，可以这样写：

// 全局变量存储经纬度（或者用闭包封装，这里为了简单用全局）
var userLatitude, userLongitude;

function geoFindMe() { 
  // ... 这里是上面优化后的geoFindMe代码 ...
  function success(position) { 
    userLatitude = position.coords.latitude; 
    userLongitude = position.coords.longitude; 
    // 如果ready已经执行，调用处理函数
    if (typeof handleUserLocation === 'function') {
      handleUserLocation(userLatitude, userLongitude);
    }
  }
  // ... 其他代码 ...
}

$(document).ready(function() {
  // 定义处理经纬度的函数
  window.handleUserLocation = function(lat, lng) {
    console.log("在ready回调中拿到的经纬度：", lat, lng);
    // 这里可以写你的业务逻辑，比如初始化地图、发送位置到服务器等
    alert(`你的位置是：纬度${lat}°，经度${lng}°`);
  };

  // DOM加载完成后，自动触发定位
  geoFindMe();
});

这样就能完美实现“在ready中使用定位得到的变量”的需求啦～

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