使用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帮助我摆脱这个问题。

来源

2013-12-09 demo_Ashif

这可能是这么简单：在你的工作为例，该市的名字是“达卡，BD”，但在你的下拉列表中，该值就是“达卡”。也许它需要国家代码？ –

使用'达卡，BD'它的工作正常，但只为该城市。并且请参阅标题为“我已经尝试”的代码。 –

'city：''+ loc +'“，'你正在复制报价单（双引号内的单引号） – Einacio

变化city: "' + loc + '",到city:loc,，它应该工作

来源

2013-12-09 19:46:07 Einacio

没有兄弟，它不工作！ :( –

Thanx Einacio。我已经解决了这个问题。非常感谢 –

使用openweathermap显示不同城市的天气数据

回答

相关问题