在指南针wunderground的风向

Question

我是从wunderground api做的天气jquery，我的jquery他的工作好。但是问题是风向的风向，我会在指南针上获得风度，我在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

如何制作千分表

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

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

最低限度的代码如下所示。如同完整片段中所示，您可以使用一些额外的样式，为任何应用程序提供专业的刻度盘。

尝试演示

要查看演示，请点击＆＃34;显示代码段＆＃34;然后＆＃34;运行代码片段＆＃34; （您可能需要向下滚动才能看到它）。该演示显示了德国柏林的当前风向。点击＆＃34;测试＆＃34;按钮为仪表设置动画。

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

＆＃13;

＆＃13;

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();
});

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;