Переменная передача НЕ работает - значение Не определено

Question

У меня есть серьезная проблема, которую я пытался отладить в течение нескольких дней. У меня есть скрипт, который получает текущую широту и долготу пользователей, а затем сохраняет их в переменных. однако, когда я пытаюсь использовать эти переменные вне этой функции и в зоне // init map, карта просто не отображается. оповещая переменные, я вижу, что за пределами переменных функции позиции установлено значение «Неопределенный». Вот мой код:

//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); 

} 

Спасибо за любую помощь, Ariel

Answer 1

Это потому, что вы объявляете переменные внутри функции. Переменные становятся частными для функции initialize и могут быть доступны только из нее. Если вам нужно иметь доступ к вашим переменным за пределами функции инициализации, переместите объявление переменной из функции.

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

Посмотрите на этот MDN article о переменной scope в JavaScript.

UPDATE

Просматривая код снова я понимаю, что проблема не изменяется сфера, запуталась в отступа. Я не знаком с Geolocation API, но я считаю, что проблема может быть в том, что navigator.geolocation.getCurrentPosition() является асинхронным, так как ему придется дождаться, когда пользователь позволит сайту получить позицию устройства. Поэтому myOptions будет присвоен до того, как будет восстановлено фактическое положение - таким образом lat & lng по-прежнему не определено, когда назначено myOptions.

Попробуйте вместо этого:

//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"); 
} 
} 

Answer 2

Больше коррекции на другой ответ. Вопрос scope не имеет отношения к делу. Как определено в исходном коде 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, или вы называете его неправильным или нет.