变量传递不起作用 - 值未定义答案

【问题标题】：Variable passing IS NOT working - value Undefined变量传递不起作用 - 值未定义
【发布时间】：2012-03-09 17:03:27
【问题描述】：

我有一个严重的问题，我已经尝试调试了几天。我有一个脚本可以获取用户当前的纬度和经度，然后将它们存储在变量中。但是，当我尝试在此函数之外和 //init 地图区域中使用这些变量时，地图只是没有显示出来。通过提醒变量，我可以看到位置函数之外的变量设置为“未定义”。这是我的代码：

//main function here
function initialize() {
var lat;
var lon;

//check if user has geo feature
if(navigator.geolocation){

navigator.geolocation.getCurrentPosition(
//get position
function(position){
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    },
// if there was an error
function(error){
    alert('ouch');
});
}
//case the users browser doesn't support geolocations
else {
alert("Your browser doesn't support geolocations, please consider downloading Google Chrome");
}
//init map
var myOptions = {
    center: new google.maps.LatLng(lat, lon),
    zoom: 16,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

}

感谢您的帮助，爱丽儿

【问题讨论】：

标签： javascript html variables geolocation w3c-geolocation

【解决方案1】：

那是因为你在函数中声明了你的变量。这些变量对initialize 函数是私有的，并且只能从它内部访问。如果您需要能够在初始化函数之外访问变量，请将变量声明移出函数。

var lat;
var lon;
function initialize() {
...

看看这个MDN article 关于 JavaScript 中的变量作用域。

更新

再次查看代码，我意识到问题不在于变量范围，而是被缩进弄糊涂了。我不熟悉 Geolocation API，但我认为问题可能在于 navigator.geolocation.getCurrentPosition() 是异步的，因为它必须等待用户允许网站获取设备的位置。因此，myOptions 将在检索到实际位置之前分配 - 因此，在分配 myOptions 时，lat 和 lng 仍然未定义。

试试这个：

//main function here
function initialize() {
var lat, lon, map, myOptions;

//check if user has geo feature
if(navigator.geolocation){

navigator.geolocation.getCurrentPosition(
//get position
function(position){
    lat = position.coords.latitude;
    lon = position.coords.longitude;

    //init map
    myOptions = {
       center: new google.maps.LatLng(lat, lon),
       zoom: 16,
       mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
},
// if there was an error
function(error){
    alert('ouch');
});
}
//case the users browser doesn't support geolocations
else {
alert("Your browser doesn't support geolocations, please consider downloading Google Chrome");
}
}

【讨论】：

这不是我的问题，我的问题是在“center: new google.maps.LatLng(lat, lon)”中，变量 lat 和 lon 显然没有任何值。
@arielschon12 如果你在该函数中console.log(position.coords.latitude, position.coords.longitude);，你会得到什么？
@arielshon12 更新了我的答案！
非常感谢，你救了你一命

【解决方案2】：

对另一个答案的更多更正。范围的问题不相关。正如原始代码中定义的那样，lat 和 lon 都在问题作者使用 alert 的上下文范围内。

这里有一个可运行的例子来证明这一点。

function getPos( f ) {
    var position = new Object();
    position.coords = new Object();
    position.coords.latitude = 5;
    position.coords.longitude = 10;
    f( position );          
}


function initialize() {
    var lat;
    var lon;
    getPos(

        function(position){
            lat = position.coords.latitude;
            lon = position.coords.longitude;
            }

            );

       alert( lat + " " + lon );

}


initialize(); //expected 5 & 10

无论如何，这似乎不是一个纯粹的 JS 问题。这似乎是您使用的任何 google api 的问题。这个问题应该被这样标记，因为我不知道这个 API 或者你是否称它错误。

【讨论】：