変数に希望の値が設定されていません

私は「気象天気アプリケーション」を作ろうとしています。これに対して、私のjQueryコードスニペットでは、2つの変数を 'latitude'の名前で& '経度'という名前で使用します。私の現在地の緯度がそれぞれ&の経度で表示すると、アラートポップアップ（ 'if'ステートメント内のもの）に反映されるので、非常に効率的です。しかし、この 'if'ステートメントの外側では、2番目のアラートポップアップに示すように、変数は値を保持しなくなりました。変数に希望の値が設定されていません

<script> 
 
$(document).ready(function(){ 
 
    var latitude = ""; 
 
    var longitude = ""; 
 
    if(navigator.geolocation){ 
 
    navigator.geolocation.getCurrentPosition(function(position){ 
 
     //alert(position.coords.latitude + " " + position.coords.longitude); 
 
     latitude = position.coords.latitude; 
 
     longitude = position.coords.longitude; 
 
    }); 
 
    } 
 
    alert(latitude + " " + longitude); 
 
}); 
 
</script>

body { 
 
    background-color : black; 
 
} 
 

 
.jumbotron { 
 
    background-color : black; 
 
    color : white; 
 
}

<html> 
 
<body> 
 
    <div class="container-fluid" id="main-div"> 
 
    <div class="jumbotron text-center" id="heading-div"> 
 
     <h1 id="heading">Current Weather</hi> 
 
    </div> 
 
    <div class="row" id="weather-row"> 
 
     <div class="col-md-offset-4 col-md-4 col-sm-offset-3 col-sm-6 col-xs-offset-2 col-xs-8" id="weather-column"> 
 
     <div class="row" id="location-row"> 
 
      <div class="col-md-12 col-sm-12 col-xs-12" id="location-column"> 
 
      </div> 
 
     </div> 
 
     <div class="row" id="region-row"> 
 
      <div class="col-md-12 col-sm-12 col-xs-12" id="region-column"> 
 
      </div> 
 
     </div> 
 
     <div class="row" id="icon-row"> 
 
      <div class="col-md-12 col-sm-12 col-xs-12" id="icon-column"> 
 
      </div> 
 
     </div> 
 
     <div class="row" id="summary-row"> 
 
      <div class="col-md-12 col-sm-12 col-xs-12" id="summary-column"> 
 
      </div> 
 
     </div> 
 
     <div class="row" id="temp-row"> 
 
      <div class="col-md-12 col-sm-12 col-xs-12" id="temp-column"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

後すべてのヘルプは高く評価され

https://codepen.io/iamrkcheers/pen/KqxyVZ

..私のコードです。ありがとうございました。

出典

2017-07-07 iamrkcheers

条件が非同期で外部が同期の場合、コールバック関数内で警告する必要があります –

コールバック関数外の緯度と経度の値が必要です。それを達成する方法？ – iamrkcheers

2番目のポップアップが関数を待つことがない – Durga

アラートの範囲が間違っています。

if(navigator.geolocation){ 

    //navigator.geolocation.getCurrentPosition is an asynchronous function 
    //we do not know when it will be done 
    //but we can tell it what do do when it finished. 
    //this is why we pass it a function as parameter 

    navigator.geolocation.getCurrentPosition(
     //this here is your callback function : 
     function(position){ 
     latitude = position.coords.latitude; 
     longitude = position.coords.longitude; 
     alert(latitude + " " + longitude); // only here do we know what latitude and longitude are. 
     } 
    ); 

    //since we are not going to synchronously wait until the getCurrentPosition finishes 
    //any statement at this point gets executed immediately. 
    alert("hey!"); 
}

あなたはこのコードを実行した場合、heyアラートは、おそらく最初にポップアップし、その座標と、アラートでしょう。

出典

2017-07-07 12:10:09

私の望むのは、コールバック関数外の緯度と経度の値です。それを達成する方法？ – iamrkcheers

あなたは既にそれらを –

持っていますが、あなたのコールバック関数が終了するまで 'latitude'と' longitude'は空になることに注意してください！ –

これは、getCurrentPosition（）の呼び出しが、独自のパラメータとして指定された関数のpositionパラメータに結果を渡す場合、非同期であるためです。外側のalert（）は内側のalert（）の前に実行されます。つまり、値が入力される前に外側の警告が空の値で実行されます。

外側のアラートに.then（alert（））を使用してpromise関数を試してください。

出典

2017-07-07 12:17:09

変数に希望の値が設定されていません

答えて

関連する問題