openweathermap을 사용하여 웹 사이트 날씨 위젯을 구축했습니다. JS & HTML입니다 - main.html 페이지 스크립트 ->은 openweathermap을 사용하여 다른 도시의 날씨 데이터를 표시합니다.
$(function() {
$('.weather-temperature').openWeather({
city: 'Dhaka, BD',
descriptionTarget: '.weather-description',
windSpeedTarget: '.weather-wind-speed',
minTemperatureTarget: '.weather-min-temperature',
maxTemperatureTarget: '.weather-max-temperature',
humidityTarget: '.weather-humidity',
sunriseTarget: '.weather-sunrise',
sunsetTarget: '.weather-sunset',
placeTarget: '.weather-place',
iconTarget: '.weather-icon',
customIcons: 'images/icons/weather/',
success: function() {
//show weather
$('.weather-wrapper').show();
},
error: function(message) {
console.log(message);
}
});
});
HTML ->/*
<div class="weather-wrapper hide">
<select id='list'>
<option value='Dhaka,BD'>Dhaka</option>
<option value='Pabna,BD'>Pabna</option>
</select>
<img src="" class="weather-icon" alt="Weather Icon" />
<p><strong>Place</strong>
<br /><span class="weather-place"></span></p>
<p><strong>Temperature</strong>
<br /><span class="weather-temperature"></span> (<span class="weather-min-temperature"></span> - <span class="weather-max-temperature"></span>)</p>
<p><strong>Description</strong>
<br /><span class="weather-description capitalize"></span></p>
<p><strong>Humidity</strong>
<br /><span class="weather-humidity"></span></p>
<p><strong>Wind speed</strong>
<br /><span class="weather-wind-speed"></span></p>
<p><strong>Sunrise</strong>
<br /><span class="weather-sunrise"></span></p>
<p><strong>Sunset</strong>
<br /><span class="weather-sunset"></span></p>
</div> */
는 '다카'도시를 제대로 작동 어떤 '선택'옵션을 사용하지 않으면 . -----
다음 /*
var loc;
$('#list').change(function() {
loc = $('#list').val();
$('.weather-temperature').openWeather({
city: "' + loc + '",
//etc.
*/
이 openweather.js 코드 ------
/*
;(function($) {
$.fn.openWeather = function(options) {
//return if no element was bound
//so chained events can continue
if(!this.length) {
return this;
}
//define default parameters
var defaults = {
descriptionTarget: null,
maxTemperatureTarget: null,
minTemperatureTarget: null,
windSpeedTarget: null,
humidityTarget: null,
sunriseTarget: null,
sunsetTarget: null,
placeTarget: null,
iconTarget: null,
customIcons: null,
units: 'c',
city: null,
lat: null,
lng: null,
key: null,
success: function() {},
error: function(message) {}
}
//define plugin
var plugin = this;
//define element
var el = $(this);
//api URL
var apiURL;
//define settings
plugin.settings = {}
//merge defaults and options
plugin.settings = $.extend({}, defaults, options);
//if city isn't null
if(plugin.settings.city != null) {
//define API url using city (and remove any spaces in city)
apiURL = 'http://api.openweathermap.org/data/2.5/weather?q='+plugin.settings.city.replace('', '');
} else if(plugin.settings.lat != null && plugin.settings.lng != null) {
//define API url using lat and lng
apiURL = 'http://api.openweathermap.org/data/2.5/weather?lat='+plugin.settings.lat+'&lon='+plugin.settings.lng;
}
if(plugin.settings.key != null) {
apiURL += '&APPID=' + plugin.settings.key;
}
etc....
*/
I를 내가 선택 옵션을 사용하여 도시 이름을 변경하려면 변경할 날씨 data.I는 시도 보여 이 긴 글에 대해 정말 유감입니다. 이 문제는 나를 심하게 괴롭 히고 나는 프로 코더가 아닙니다. 그래서 plz이 문제에서 나갈 수 있도록 도와주세요.
처럼 간단 할 수 있습니다 작동합니다 : 당신의 일 예에 는, 도시의 이름이 "다카, BD"입니다,하지만 당신의 드롭 다운에, 값은 "단지 다카입니다 ". 아마도 국가 코드가 필요할까요? –
'Dhaka, BD'가 제대로 작동하지만 해당 도시에서만 사용합니다. 그리고 plz는 '나는 시도했습니다.'라는 제목의 코드를 보았습니다. –
'city : " '+ loc +'", '큰 따옴표 안에 큰 따옴표를 넣으려고합니다. – Einacio