天気APIエラー{"cod"： "400"、 "message"： "{vlat}は浮動小数点ではありません"}

Question

ローカル天気アプリプロジェクトのAPI座​​標を取得しようとしています。天気図

http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+long+'&appid=7cc72055cf03c02e9bf988f2a7b7b7e2 

私はリンクを開こうとするたびにこのエラーメッセージが表示されます。

{ "COD"： "400"、 "メッセージ"： "{VLATは}フロートない"}

はまた、それが私の位置を引くから自分のコンソールを防止します。ここに私のコードへのリンクがあります。

https://codepen.io/andreacarr/pen/eEMeMr?editors=1111

役立つと私はgeolocation.getCurrentPositionコールが非同期であるため、問題があるエラー

Answer 1

であるように思わ聞かせ、それゆえあなたは彼らが定義される前にlatとlongの両方を使用しようとしているしてください範囲外です。

$(document).ready(function() { 
    var long; 
    var lat; 

    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     long = position.coords.longitude; 
     lat = position.coords.latitude; 
     $("#data").html("latitude: " + lat + "<br>longitude: " + long); 

     var api = 'https://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + long + '&appid=7cc72055cf03c02e9bf988f2a7b7b7e2'; 
     $.getJSON(api, function(data) { 
     console.log(data.coord.lon); 
     console.log(data); 
     }); 
    }); 
    } 
}); 

html { 
    background: url(http://s1.picswalls.com/wallpapers/2016/06/06/beach-desktop-background_090607928_305.jpg)center center fixed; 
    background-size: cover; 
} 

header { 
    font-family: lobster; 
    color: white; 
    font-size: 40px; 
    text-align: center; 
    margin: 40px; 
    font-weight: bold; 
} 

p { 
    color: white; 
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<header>Local Weather</header> 
<p id="data"></p> 

Working example

（注）この例では、作成する必要があります：あなたはこのように、ジオロケーション・ロジックのコールバック内$.getJSON呼び出しを配置する必要があり、この問題を解決するには

ジオロケーションがスタックスニペットで動作しないため、jsFiddleで