Днес ние използваме геолокация на HTML5 API, за да осигури на посетителите персонализиран прогноза за времето. Използването на JQuery, AJAX-ние ще изпрати заявка за две популярен API от Yahoo, за да получите допълнителна географска информация и прогноза за времето. В момента нашият пример също от набор от икони climacons са били използвани.
Получаване на ключ прилагане
Yahoo предлага огромно разнообразие от полезни API. че разработчиците могат да използват безплатно. Изискването е само, че трябва да се регистрирате вашето приложение в развитието на панела за обслужване. Процесът на регистрация е много прост и ясен, и като резултат може да получите идентификационния номер на приложението (то трябва да изглежда под заглавието на приложението). Този номер ще ви е необходим по-късно в хода на проучването.
Това, което трябва да организира уеб сайт с прогноза за времето:
* Да започнем с това, ние използваме API за геолокация, който се подкрепя от повечето съвременни браузъри. API подсказва на потребителя да въвежда данни за данните за местоположението, и се връща под формата на GPS координати.
* След това направи искане до PlaceFinder API от Yahoo, с извършване на заявка към горните координати. Това ще ни даде името на града, страната и woeid - специален номер, използван за идентифициране на града, в прогнозата за времето.
* И накрая, ние да предостави искането на метеорологичните API от Yahoo до низ влезе woeid. Това ще ни помогне да получите информация за текущите метеорологични условия и прогноза за времето за следващите дни.
Чудесно! Сега трябва да започнем да развиваме HTML-код.
Започваме, може би, с документ за HTML5-празен в седалището на което ще добави връзки към нашата стилове и два шрифта на Уеб шрифтовете библиотека от Google. В тялото на документа, за да добавите горен H1, и оформлението на плъзгача за прогнозата за времето.
Преди тялото на затварящ маркер трябва да добавим най-новата версия на JQuery и файл script.js нашия скрипт, ние ще разгледаме по-нататък в текста.
Първият етап е да се идентифицират променливите в два конфигурационни /assets/js/script.js:
Те са вписани като параметри на Аякс искания за местоположение и API за получаване на данни за времето.
След списъка по-горе, сега ние трябва да се възползваме от HTML5-API за геолокация, за да получите GPS-координати. Този API се поддържа от всички съвременни браузъри, включително Internet Explorer 9 и мобилни браузъри. За да го използвате, трябва да се провери дали обектът е глобална навигация опция геолокация. Ако отговорът е да, тогава ние наричаме метод getCurrentPosition също се извършва два събитиен мениджмънт, който отговаря за успешното изпълнение и грешката. Нека да разгледаме съответния код от script.js, която извършва тази дейност:
locationSuccess функция - е този, от който ние в момента се изпращат заявки към API от Yahoo. Функция Locati # 111; nНомер на грешката провежда обект грешка, като посочва причините за тази грешка. Ние също така се използва допълнителна функция showError за показване на съобщения за грешка на екрана.
Пълна версия locationSuccess, както следва:
API PlaceFinder ни връща към резултатите под формата на чист JSON. Но тъй като се намира в друг домейн, той ще бъде в състояние да обработва само тези браузъри, където има подкрепа за CORS (крос споделяне произход на ресурсите). Повечето съвременни браузъри, които поддържат геолокация, също подкрепят и CORS, с изключение на IE9 и Opera, което означава, че настоящите ни например няма да работи в тези браузъри.
Също така да се има предвид е, че API ни връща към Прогноза за времето за само два дни, което е малко ограничава използването на уеб приложения, но това не може да направи.
API за времето, ние ще използваме само за да се получат данни за температура, но също така ни дава допълнителна информация, която може да намерите полезна. Можете да експериментирате с API и вижте отговорите в конзолата YQL.
Щом получим метеорологичните данни, което наричаме addWeather функция, която създава нова LI-т при неподредените списъци #scroller.
Сега трябва да се вслуша в кликне върху "Напред" и "Назад", и така ние се измести плъзгача, за да се покаже желаната дата в прогнозата.
И това е нашата проста прогноза за времето е готов! Всички заедно, че е възможно да се види в /assets/js/script.js файл. Клирънсът не се обсъждат тук, но вие сте свободни да изследвате /assets/css/styles.css.
В този пример, можете да научите как да се развива собствения си уебсайт Прогноза за времето чрез подкрепа на API за геолокация, Времето и места от Yahoo. Нашият пример ще работи в повечето съвременни браузъри на много мобилни устройства.
Свързани статии