【问题标题】:how to show the wind direction in degrees in javascript?如何在javascript中以度数显示风向?
【发布时间】:2020-08-05 17:04:07
【问题描述】:

我正在构建一个天气应用程序,它使用天气 IPA 显示每个城市的天气状况。 我试图以度数显示风向,但我只能在文字描述中显示,例如:Northerly','North Easterly','Easterly.. 我也想以度数显示风。

如何在javascript中以度数(例如90°)显示风向(包括在数字后使用小圆圈度数符号)?

因为我正在处理数据文件,所以如果您想查看完整代码,我无法让代码在文本编辑器之外工作。

我只能分享主要的部分代码。不过别担心,我无法分享的部分是城市的数据文件——please select——每个国家的数据文件——select a country。 --

在这段代码中,我将风向显示为文字描述,如何也以度数显示?

function text(d) {
        let directions = ['Northerly', 'North Easterly', 'Easterly', 'South Easterly', 'Southerly', 'South Westerly', 'Westerly', 'North Westerly'];

        d += 22.5;

        if (d < 0)
            d = 360 - Math.abs(d) % 360;
        else
            d = d % 360;

        let w = parseInt(d / 45);
        return `${directions[w]}`;
    }

function getData(selectedCounty) {
     $.ajax({
         url: 'http://api.openweathermap.org/data/2.5/weather?id=' + selectedCounty + '&appid=e4761ea183f1b15b7c6af8e63724a863',
         type: 'GET',
         dataType: 'json',
         success: function(response) {
         
             //display the chosen city and date from the requested data
             $('#cityName').empty().append('Weather for ' + response.name + ' on ' + toDD_MM_YY_format(response.dt));
             //display the city name div after the user choose country and city

             $('#weatherInfo').empty().append(
                 'Weather Conditions: ' + response.weather[0].main + '</br>' +
                 'Temperature :' + toCelsius(response.main.temp) + '</br>' +
                 'Wind Speed :' + toMilesPerHour(response.wind.speed) + '</br>' +
                 'Wind Direction: ' + text(response.wind.deg));
             displayWeatherIcon(response.weather[0].icon);
         },
         error: function() {
             $('#errorInfo').show().html('<p> An error has occurred, Please try again later</p>');
             $('#weatherInfo').empty();
         }
     });
 }

 //convert temperature in kelvin to Celsius.
 function toCelsius(kelvin) {
     var tempInCelsius = Math.round(kelvin - 273.15);
     return tempInCelsius + '°C';
 }

 //converts speed in knots to miles per hour(mph)
 function toMilesPerHour(knots) {
     var speedInMilesPerHour = Math.round(knots * 1.15077945); //1 Knot = 1.15077945 mph
     return speedInMilesPerHour + ' mph';
 }

 //converts UNIX time stamp in to readable format
 function toDD_MM_YY_format(unixTimeStamp) {
     var d = new Date(unixTimeStamp * 1000);
     var month = (d.getMonth()) + 1; //unix time stamp month starts from 0.
     var formattedDate = d.getDate() + "-" + month + "-" + d.getFullYear();
     return formattedDate;
 }
//convert the wind direction from degree to textual description.
function text(d) {
        let directions = ['Northerly', 'North Easterly', 'Easterly', 'South Easterly', 'Southerly', 'South Westerly', 'Westerly', 'North Westerly'];

        d += 22.5;

        if (d < 0)
            d = 360 - Math.abs(d) % 360;
        else
            d = d % 360;

        let w = parseInt(d / 45);
        return `${directions[w]}`;
    }
<!DOCTYPE html>
<html>

<head>
    <title>UK Weather Application</title>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="apiweather.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
    <header>
        <h1>UK Weather Data</h1>
    </header>
    <section id="content">
        <h4>Current Weather Data</h4>
        <select id="countries">
            <option selected>Select a Country</option>
            <option value="New York">New York</option>
            <option value="Argentina">Argentina</option>
            <option value="Australia">Australia</option>
            <option value="Portugal">Portugal</option>
        </select>
        <select id="counties">
            <option selected>&lt;&lt;Please Select</option>
        </select>
       
        
        <div id="cityName"></div>
        <div id="weatherInfo"></div>
        <div id="errorInfo" hidden></div>
    </section>
    <footer>
    </footer>
</body>

</html>

希望我解释得很好,请不要犹豫,问我问题。

谢谢。

【问题讨论】:

    标签: javascript jquery ajax weather weather-api


    【解决方案1】:

    因为您使用的天气 API 我不太确定,但也许您可以尝试在 text() function 中使用类似的东西

    const windDegree = String.fromCharCode(0xfeff00b0);
    deg = 90;
    
    console.log(`${deg}${windDegree} = ${text(deg)}`);

    【讨论】:

      【解决方案2】:

      试试这样的

      let WIND_DIRECTION;
          function getWindDirection(d){
              switch (true) {
                  case 0 :
                  case 360:
                      WIND_DIRECTION = "N";
                  break;
                  case 90 :
                      WIND_DIRECTION = "E";
                  break;
                  case 180 :
                      WIND_DIRECTION = "S";
                  break;
                  case 270 :
                      WIND_DIRECTION = "W";
                  break;
                  case (d>0 && d<90) :
                      WIND_DIRECTION = "NE";
                  break;
                  case (d>90 && d<180) :
                      WIND_DIRECTION = "SE";
                  break;
                  case (d>180 && d<270) :
                      WIND_DIRECTION = "SW";
                  break;
                  case (d>270 && d<360) :
                      WIND_DIRECTION = "NW";
                  break;
                  default:
                      WIND_DIRECTION = "-";
                      break;
              }
      
              return WIND_DIRECTION;
          } 
      

      【讨论】:

      • 您好,以下是您回答的一些准则:不建议发布纯代码的答案,请考虑同时解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助,质量更高,更有可能吸引投票。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-01-08
      • 1970-01-01
      • 2023-04-11
      • 2011-01-17
      • 2015-09-19
      相关资源
      最近更新 更多