Question

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

<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>

Answer 1

创建一个对象，将每个天气图标的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+'" />';

Answer 2

就在这里：

 "<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>"

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

现在，如果你坚持使用不同的名字，你需要将他们的名字映射到你的名字，这应该是相当微不足道的。

如何将天气图标从json更改为我自己绘制的天气图标

2 个答案: