2017-02-11 10 views
1

Привет, поэтому я нашел учебное пособие о том, как создать простую приложение погоды, используя API подземной погоды. Я буквально скопировал весь код (с очень небольшими изменениями), чтобы увидеть, как приложение будет функционировать, но оно не работает. Соответствующий HTML здесь:Проверка кода API AJAX? Подземная погода api?

<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 здесь:

$(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-дисплеях и при загрузке я поздоровался с предупреждением, что говорит: «Успех», что указывает на получение геолокации это не проблема. Но текст не меняется, чтобы показать погоду вообще:/Итак, это часть моего кода, в которой мне нужен обзор.

Я думаю, что у меня была проблема с правильным закрытием всего или с тем, как я использовал $ .ajax(), поскольку это вызывало у меня много проблем в других проектах, над которыми я работал в последнее время ,

Любая помощь была бы очень оценена! Я новичок в кодировании, поэтому прошу прощения, если я совершил глупую ошибку где-то там. Хотя, просто копируя из другого источника и добавляя предупреждение и меняя тексты предупреждений, я не думаю, что там будет серьезный недостаток.

Вот ссылка на статью, которую я использовал, чтобы построить этот код: http://www.developerdrive.com/2014/09/how-to-build-a-weather-app-with-html5s-geolocation-api/

А вот API документация подпольной погоды: https://www.wunderground.com/weather/api

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

+0

откройте консоль браузера 'Shift + Ctrl + C' (или' Shift + ⌘ + C') и сообщите нам, что там ошибка. –

+0

Консоль ничего не отображает, это тоже меня смущает – mraaron

ответ

0

Я думаю, ваша проблема здесь:

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

Вы пропустили ";" после объявления и назначения ключа. И ваш прогноз погоды неверен bcz, вы не передаете ключ api. Оно должно быть:

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

И ключ должен быть заменен фактическим ключом апи, который вы получили от подписания в https://www.wunderground.com

+0

Эта точка с запятой, вероятно, проблема, ничего себе не могу поверить, что я пропустил это. И да, я передаю свой ключ в действительном коде, я просто включил его в «MYKEY» для обеспечения конфиденциальности. Но спасибо товарищу! – mraaron

 Смежные вопросы

  • Нет связанных вопросов^_^