如何将天气图标从 json 更改为我自己画的天气图标答案

【问题标题】：How to change weather icon from json to a weather icon I drew myself如何将天气图标从 json 更改为我自己画的天气图标
【发布时间】：2014-02-23 08:59:35
【问题描述】：

我正在尝试将我从 API 获得的天气图标更改为我自己在 Photoshop 上绘制的图标！我的变量是法语和 cmets，如果您需要翻译来理解我的代码，请询问！

<script type="text/javascript">
        jQuery(document).ready(function($) {
            var maLatitude;     /*Variable gobale contenant la latitude*/
            var maLongitude;    /*Variable gobale contenant la longitude*/  

            if (navigator.geolocation)
                navigator.geolocation.getCurrentPosition(showPosition);
            else
            alert("Votre navigateur supporte pas la géolocalisation, essayez de mettre à jour votre navigateur!");
        }); 

        function showPosition(position){
            maLatitude= position.coords.latitude;
            maLongitude= position.coords.longitude; 

        $.ajax({
            url : "http://api.wunderground.com/api/API_KEY/geolookup/conditions/lang:FC/q/"+maLatitude+","+maLongitude+".json",
            dataType : "jsonp",
            success : function(parsed_json) {

                var location = parsed_json['location']['city'];
                var temp_c = parsed_json['current_observation']['temp_c'];  
                var tempRessentie = parsed_json['current_observation']['feelslike_c'];  
                var wicon = parsed_json['current_observation']['icon'];
                var condition = parsed_json['current_observation']['weather'];
                var vent_kmh = parsed_json['current_observation']['wind_kph'];
                var rafales = parsed_json['current_observation']['wind_gust_kph'];
                var visibilite = parsed_json['current_observation']['visibility_km'];

                $("div.ville").append("<div class='endroit'>" + location + " </div>"+
                                        "<div class='temp'>" + temp_c + " °C</div>"+
                                        "<div> Temp. ressentie : "+tempRessentie+" °C</div>"+
                                        "<div class='triangle'></div>"+
                                        "<div class='icone'><img src='http://icons-ak.wxug.com/i/c/k/"+wicon+".gif' alt='"+condition+"' title='"+condition+"'/></div>"+
                                        "<div class='condition'>"+condition+"</div>"+
                                        "<div>Vent : "+vent_kmh+" km/h</div>"+
                                        "<div>Rafales : "+rafales+" km/h</div>"+
                                        "<div>Visibilité : "+visibilite+" km</div>");
                }
        }); 
    }
    </script>

【问题讨论】：

那么问题是什么？只需将 img src 更改为您想要的任何内容。
但是如果我把它改成另一个 src 它只会给我一个特定的天气图标，除非有另一种我没想到的方法？ :O
基本上根据当天的天气情况，加载页面时会出现不同的天气图标！但是我自己画了几个天气图标，我希望能够根据当天的天气加载它们！
您需要与它们具有相同的文件名，或者自己将它们映射到您想要使用的任何内容。所以如果他们有sunny.gif，你就有sunny.gif，你唯一改变的部分就是你的服务器的路径。
哦，非常感谢！！！那行得通！ :D:D:D:D:D 我无法表达我有多高兴！！谢谢谢谢谢谢！！

标签： javascript json html api weather-api

【解决方案1】：

所以就在这里：

 "<div class='icone'><img src='http://icons-ak.wxug.com/i/c/k/"+wicon+".gif' alt='"+condition+"' title='"+condition+"'/></div>"

改成：

 "<div class='icone'><img src='http://YourServer.com/yourIcons/"+ wicon +".gif' alt='"+condition+"' title='"+condition+"'/></div>"

并确保您的图标名称与它们的名称相同。

现在，如果您坚持使用不同的名称，则需要将它们的名称映射到您的名称，这应该相当简单。

【讨论】：

谢谢！没想到！
请注意如果您没有为所有图标创建替换可能会发生什么。如果图标名称是您认识的，我建议添加更多逻辑来执行上述操作。
@Snixtor：可能会发生一个断开的链接图标。几乎没有世界末日。但是，是的，如果我这样做，我会在它周围添加更多逻辑，以将我知道的条件映射到我拥有的图标，如果我不认识它，就完全省略图标。我还要确保我关闭一些我认为比他们图标的文件名更稳定的东西，因为它可能会改变。但这一切似乎都让 OP 有点过头了。

【解决方案2】：

创建一个对象，将每个天气图标的 url 放入对象中，名称代表天气状况，然后使用正确的名称获取正确的 url：

var weatherIcons = {
   snowy:"/snowyicon.jpg",
   rainy:"/rainyicon.jpg",
   sunny:"/sunnyicon.jpg"
};

...

var condition = parsed_json['current_observation']['weather'];
var iconTOUse = weatherIcons[condition];

var element = '<img src="'+iconTOUse+'" />';

【讨论】：