javascript - 指南针 wunderground 上的风向

Question

我从 wunderground api 制作天气 jquery，我的 jquery 工作正常。但问题出在 wunderground api 中的风向度数，我想在罗盘上获取风度数，我在 stackoverflow 中找到了一些问题的答案:

CSS:

#compass {
  width: 380px;
  height: 380px;
  background-image:url('http://i.imgur.com/44nyA.jpg');
  position: relative;
}
#arrow {
  width: 360px;
  height: 20px;
  background-color:#F00;
  position: absolute;
  top: 180px;
  left: 10px;
  -webkit-transform:rotate(120deg);
  -moz-transform:rotate(120deg);
  -o-transform:rotate(120deg);
  -ms-transform:rotate(120deg);

  -moz-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

#compass:hover #arrow {
  -webkit-transform:rotate(0deg);
  -moz-transform:rotate(0deg);
  -o-transform:rotate(0deg);
  -ms-transform:rotate(0deg);
}​

html

<div id="compass">
  <div id="arrow"></div>
</div>​

我想在我的 jquery 天气中应用这个 css，但我不知道如何。这个 css 的演示:http://jsfiddle.net/adb2A/

这是我的 jquery :

 var x = document.getElementById("demo");

 if (navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(showPosition);
 } else { 
 x.innerHTML = "Geolocation is not supported by this browser.";
 }

 function showPosition(position) {
 var location = position.coords.latitude + "," + position.coords.longitude; 

 jQuery(document).ready(function(weather) {

 $.ajax({
 url : "http://api.wunderground.com/api/eb7a37c339cfd624/geolookup/conditions/forecast10day/lang:AR/q/"+location+".json",
 dataType : "jsonp",
success : function(data) {


var html = '<div style="color: black;text-align:right;direction: rtl;">';

html += '<h2>درجة حرارة الان ' + data.current_observation.temp_c + '</h2>'
html += '<h3>شعور بها ' + data.current_observation.feelslike_c + '</h3>'
html += '<h3>الرطوبة ' + data.current_observation.relative_humidity + '</h3>'
html += '<h3>الضغط الجوي ' + data.current_observation.pressure_mb + '</h3>'
html += '<h3>كمية هطول الامطار ' + data.current_observation.precip_today_in + '</h3>'

html += '</div>';

  $("#news").append(html).hide().fadeIn("slow");

  ///10days///

var dayArray = data.forecast.txt_forecast['forecastday'];

var html = '<div id="10days" style="color: black;text-align:right;direction: rtl;">';
for(var i=0; i<dayArray.length; i+=2)

html += '<div class="container center-block"><div class="row "><div class="col-md-8 col-md-offset-2"><h3>'+data.forecast.txt_forecast.forecastday[i]['title']+ " : " +data.forecast.txt_forecast.forecastday[i]['fcttext_metric']+'</h3></div>'

html += '</div></div>';

  $("#10").append(html).hide().fadeIn("slow");


 }
 });
 });
 } 

Answer 1

2021 年更新:示例代码不再运行，因为 Weather Underground (Wunderground) API 在 2018 年被弃用。但是，可以修改代码以使用不同的数据提供程序。

如何制作千分表

题目问的是如何制作一个千分表来显示风向信息。此代码片段向您展示了如何使用最少的编码创建一个看起来很专业的代码片段。它可以很容易地适应其他应用程序和数据。

OP 最初试图通过冗长而复杂的 CSS 转换列表来实现这一点。然而，一个更简单的解决方案是使用带有缩放背景图像和动态定位指示针的 CANVAS 标签。

最基本的代码如下所示。通过一些额外的样式(如完整代码段所示)，您可以获得适合任何应用的具有专业外观的千分表。

尝试演示

要查看演示，请单击“显示代码片段”，然后单击“运行代码片段”(您可能需要向下滚动才能看到)。该演示显示了德国柏林的当前风向。单击“测试”按钮为仪表设置动画。

CSS

#compass {
  background: url(YourGaugeBackground.jpg); 
  background-size: cover;
}

Javascript:

function setCompass(degrees) {
      var x, y, r, ctx, radians;
      ctx = window.compass.getContext("2d");
      radians = 0.0174533 * (degrees - 90);
      x = ctx.canvas.width / 2;
      y = ctx.canvas.height / 2; 
      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height );
      ctx.beginPath();
      ctx.lineWidth = 10;
      ctx.moveTo(x, y);
      ctx.lineTo(x + r * Math.cos(radians), y + r * Math.sin(radians));
      ctx.stroke();
}

HTML

<canvas id="compass" height=200 width=200></canvas>

function setCompass(degrees) {

  var x, y, r, ctx, radians;
  
  ctx = window.compass.getContext("2d");
  
  // subtract 90 so that north is up then convert to radians
  radians = 0.0174533 * (degrees - 90);
  
  // calc compass centre 
  x = ctx.canvas.width / 2;
  y = ctx.canvas.height / 2; 
  r = x * 0.8;
  
  // clear 
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height );
  ctx.beginPath();

  // optional styling
  ctx.strokeStyle = "rgba(255,0,0,0.5)";
  ctx.fillStyle = "rgba(255,0,0,0.5)";
  ctx.lineCap = 'round';
  ctx.shadowOffsetX = 4;
  ctx.shadowOffsetY = 4;
  ctx.shadowBlur = 2;
  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";

  // draw compass needle
  ctx.lineWidth = 10;
  ctx.moveTo(x, y);
  ctx.lineTo(x + r * Math.cos(radians), y + r * Math.sin(radians));
  ctx.stroke();

}

// ajax call for city weather data
function getWeatherForecast() {

  var url = 'http://api.wunderground.com/api/eb7a37c339cfd624/geolookup/conditions/forecast10day/lang:EN/q/Germany/Berlin.json';

  $.getJSON(url, function(data) {
    window.debug.innerHTML = JSON.stringify(data, false, '  ');
    $('#status').html(
      //'<img src="' + data.current_observation.icon_url + '">' +
      data.location.city + ', ' +
      data.location.country_name + ': ' +
      data.current_observation.temperature_string + ', ' +
      'Wind ' +
      data.current_observation.wind_string + ', ' +
      data.current_observation.wind_degrees + '°'
    );
    setCompass(data.current_observation.wind_degrees);
  });

}

$('#test').click(function() {
  $(this).attr('disabled', true);
  var d=0, id = setInterval(function() {
    setCompass( d );
    d += 10;
    if (d > 360) {
      clearInterval(id);
      $('#test').attr('disabled',false);
      getWeatherForecast();
    }
  }, 100);
  
});


$(document).ready(function() {
  getWeatherForecast();
});

#compass {
  background: url(http://i.imgur.com/44nyA.jpg);
  background-size: cover;
}

body {
  font-family: sans-serif;
}

#debug {
  background-color: aliceblue;
  border: 1px solid black;
  padding: 0.5em;
  width: 90%;
  height: 50em;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<button id="test">Test</button> scroll down to view json data<br>
<canvas id="compass" height=200 width=200></canvas>
<div id="status">Berlin, Germany</div>
json data source: <a href="http://api.wunderground.com" target="_blank">Weather Underground</a><br>
<textarea id="debug" spellcheck=false></textarea>