使用openweathermap显示不同城市的天气数据
问题描述:
我使用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> */
没有它正常工作了 '达卡' 城市任何 '选择' 选项。我想用选择选项可以更改城市名称,并显示改变的气候data.I试图------
/*
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....
*/
我我真的很抱歉这么长时间的写作。这个问题让我感觉很糟糕,我不是专业编码器。所以PLZ帮助我摆脱这个问题。
答
变化city: "' + loc + '",
到city:loc,
,它应该工作
+0
没有兄弟,它不工作! :( –
+0
Thanx Einacio。我已经解决了这个问题。非常感谢 –
这可能是这么简单: 在你的工作为例,该市的名字是“达卡,BD”,但在你的下拉列表中,该值就是“达卡”。也许它需要国家代码? –
使用'达卡,BD'它的工作正常,但只为该城市。并且请参阅标题为“我已经尝试”的代码。 –
'city:''+ loc +'“,'你正在复制报价单(双引号内的单引号) – Einacio