2017-02-11 7 views
1

こんにちは、私は地下の天気APIを使用して簡単な天気アプリを作成する方法に関するチュートリアルを見つけました。私は文字通り、アプリケーションがどのように機能するのかを知るためにコード全体を(非常に小さな変更で)コピーしましたが、機能しません。ジオロケーションを取得することを示して、私は「成功」と言う警告で迎えてるAJAX APIコードチェック?地下の天気のAPI?

$(document).ready(function() { 

    var Geo = {}; 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(success, error); 
    } 
    else { 
    alert("Geolocation off"); 
    } 

    function error() { 
    alert("We couldn't find you"); 
    } 

    function success(position) { 
    Geo.lat = position.coords.latitude; 
    Geo.lng = position.coords.longitude; 
    alert("Success"); 


    var key = "MYKEY" 
    var Weather = "http://api.wunderground.com/api/MYKEY" + 
    "/forecast/geolookup/conditions/q/" + 
    Geo.lat + "," + Geo.lng + ".json"; 

    $.ajax({ 
    url: Weather, 
    dataType: "jsonp", 
    success: function(data) { 
    var location = data["location"]["city"]; 
    var temp = data["current_observation"]["temp_f"]; 
    var img = data["current_observation"]["icon_url"]; 
    var desc = data["current_observation"]["weather"]; 
    var wind = ["current_observation"]["wind_string"]; 


     $("#location").html(location); 
     $("#temp").html(temp); 
     $("#desc").html(desc); 
     $("#wind").html(wind); 
     $("#img").attr("src", img); 

    }, 
    fail: function() { 
     alert("Nah son"); 
    } 
    }) 
    } 

}) 

HTMLが表示され、負荷に:

<div class="container"> 

<div id="forecast"> 
    <h1>Weather at <span id="location"> 
    </span></h1> 
    <div id="imgdiv"> 
    <img id="img" src=""/> 
    </div> 
    <p>It is currently <span id="temp"> 
    </span> degrees F with <span id="desc"> 
    </span></p> 
    <p>Wind: <span id="wind"> 
    </span></p> 
    </div> 
</div> 

そして、私のJavaScriptはここにある:関連するHTMLはここにあります問題ではありませんでした。しかし、テキストは天気予報に変わることはありません:/それは私のコードの一部であり、私はレビューが必要です。

私は、すべてを正しく閉じることに問題があったに違いないと思っています。これは、私が最近取り組んできた他のプロジェクトで多くの問題を引き起こしているので、$ .ajax() 。

非常に助かります。私はコーディングに新しいので、もし私がそこのどこかで愚かなミスをしたら、私は謝罪します。単に別のソースからコピーしてアラートを追加し、アラートテキストを変更するだけで、そこに大きな欠陥があるとは思われません。ここで

は、私はこのコードをビルドするために使用される記事へのリンクです:任意の助けhttps://www.wunderground.com/weather/api

ありがとう:http://www.developerdrive.com/2014/09/how-to-build-a-weather-app-with-html5s-geolocation-api/

そして、ここでは地下の天気のAPIドキュメントです!

+0

オープンコンソール 'Shiftキー+ Ctrlキー+ C '(または' Shiftキー+⌘+ C' https://www.wunderground.comにサインアップから得た実際のAPIキーに置き換える必要があります:それはする必要があります)、そこに何があるのか​​教えてください。 –

+0

コンソールに何も表示されない、それも私を混乱させます – mraaron

答えて

0

私はあなたの問題はここにあると思う:

var key = "MYKEY" 
    var Weather = "http://api.wunderground.com/api/MYKEY" + 
    "/forecast/geolookup/conditions/q/" + 
    Geo.lat + "," + Geo.lng + ".json"; 

あなたは逃しました ";"キーの宣言と割り当て後。あなたの天気のURLは間違っているあなたはAPIキーを渡していないbczです。

var Weather = "http://api.wunderground.com/api/”+ key +”/forecast/geolookup/conditions/q/" + Geo.lat + "," + Geo.lng + ".json"; 

とキーを使用すると、

ブラウザの
+0

そのセミコロンはおそらく問題です。そして、私は実際のコードで私の鍵を渡します、私はちょうどプライバシーのためにここで "MYKEY"で下落しました。しかし、ありがとう! – mraaron