変数の受け渡しが動作していない - 値未定義

Question

私は数日前からデバッグしようとしている深刻な問題があります。 私はユーザーに現在の緯度と経度を取得し、それらを変数に格納するスクリプトを用意しています。しかし、私はこの関数の外でこれらの変数を使用しようとすると、//initマップのゾーンでは、マップは表示されていません。変数を警告することで、私は位置の外で変数が "Undefined"に設定されていることが分かります。任意の助け

が

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

} 

おかげで、アリエル

Answer 1

あなたが関数内であなたの変数を宣言しているためである。ここに私のコードです。変数は initialize関数に対してプライベートになり、その変数からのみアクセスできます。 initialize関数の外で変数にアクセスできるようにする必要がある場合は、関数から変数宣言を移動します。

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

JavaScriptの可変範囲についてこの MDN articleをご覧ください。

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

より。 スコープの問題は該当しません。元のコード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を知らないので、この質問にはそのようなタグが付いていたはずです。