FCC项目之 show the local weather

前言

这是一个要使用API的项目，第一次独立使用API，所以非常懵逼，就在YouTube上找了一个视频，看了一下怎么调用API，再把jQuery对应的文档看了一下就开始了。

然而，调出来的数据气温居然是快300度了，这是什么鬼？就Google了一下，在stackoverflow上找到了答案，原来默认是开式温度，需要加一个参数，把温度变成摄氏度，答案里说看官方文档，但是没看见具体在哪啊，就搜了一下unit关键字，找到了关键的信息。

把自己这一发现，写到了那个问题的答案后面。嗯，这是我在stackoverflow上的第一次答题，结果是，3分钟之后就被鄙视了。一个哥们修改了我的答案，还踩了一脚，fixed bad grammar，好吧，我的烂英语。不过很开心，终于从一个索取信息的人开始变成一个提供信息的人。

废话到此，以下进入正题。

1.调用 openweathermap API

如果你没调过 API ，这里科普一下，要调API的话需要一个** appkey **或者叫
appid ，这个你所调用的 API 网站在你注册要创建应用的时候都会给你提供，找到它。比如我的，登录 openweathermap ，进去直接就进入我的主页了，点击 API keys 选项卡，就可以看到我们要用的 appkey 了。

在你得到Appkey之后，仔细查看网站上的官方文档，理解如何使用 API。

为了方便使用 json 数据，这里我们需要引入 jQuery 库，下载到本地引用或是 CDN 方式引用，任选一种。

以上做完，就可以愉快地写代码了。

1. 建一个HTML页面，引入 jQuery 和自己的 js文件
2. 使用 getJSON 方法得到 API 数据，在控制台打印查看得到的数据（这一步非必选，不过是我习惯每做完一步，都打印确认一下结果。）

$.getJSON('http://api.openweathermap.org/data/2.5/weather?id=2172797&appid=86e8744e87c5dc3b51370144a2d7df8b', function(data) {
    console.log(data.wind.deg);  //风的等级
});```


### 2. 获取API数据，填充至HTML中
#### 2.1 获取用户位置
上面得到的 API 数据是用城市 ID 做参数指定了城市，然而我们想让每个登录这个App的人获取的都是他们所在城市的天气，有2种办法，
1. 用BOM对象获取经纬度——这种方式的好处是获得的定位比较准，但缺点是有弹窗，用户体验不好。

var lat, lon;
var arr = [];
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
lat = Math.round(position.coords.latitude);
lon = Math.round(position.coords.longitude);
var api = 'http://api.openweathermap.org/data/2.5/weather?' + "lat=" + lat + "&lon=" + lon + "&units=metric&appid=86e8744e87c5dc3b51370144a2d7df8b";
// console.log(api); //API 字符串
$.getJSON(api, function(data) {
console.log(data.name); //城市名
});
});
}

2. 用 IP API 获取经纬度——这种方式的好处是悄悄通过 IP 地址就获取到了用户位置，但对于我们这种长期使用 VPN 和 SS 的人来说，获取的都是代理服务器的地址，比如我目前使用的代理服务器是韩国的，一直显示的是韩国松山这个地方。不过，这个项目，我还是采用这种方式，因为不用弹窗。

$.getJSON('http://ipinfo.io', function(location) {
var locArr = location.loc.split(','); //获取经纬度字符串并将其分割成数组
// console.log(locArr);
var lat = locArr[0];
var lon = locArr[1];
var api = 'http://api.openweathermap.org/data/2.5/weather?' + "lat=" + lat + "&lon=" + lon + "&units=metric&appid=86e8744e87c5dc3b51370144a2d7df8b";
// console.log(api);
$.getJSON(api, function(data) {
console.log(data.name); //城市名
});
});

#### 2.2 将获取的数据填充到HTML中

$.getJSON('http://ipinfo.io', function(location) {
var locArr = location.loc.split(',');
// console.log(locArr);
var lat = locArr[0];
var lon = locArr[1];
var api = 'http://api.openweathermap.org/data/2.5/weather?' + "lat=" + lat + "&lon=" + lon + "&units=metric&appid=86e8744e87c5dc3b51370144a2d7df8b";
// console.log(api);
$.getJSON(api, function(data) {
$('#loc').text(location.city); //填充城市
$('#temp').text(data.main.temp); //填充温度
$('#wind').text(data.wind.speed); //填充风速
$('#windDir').text(getWindDir(data.wind.deg)); // 填充风向
// console.log(data.wind.deg);
// console.log(getWindDir(data.wind.deg));
$('#desc').text(data.weather[0].description); //填充天气描述，比如light rain
$('#humidity').text(data.main.humidity); // 填充湿度
$weather = data.weather[0].main; // 获取天气的主要描述
// $weather = 'Additional';
// console.log($weather);

        $icon = $('#icon');  //获取放天气图标的元素
        $body = $('body');  // 获取 body 元素
      /*当主要的天气描述变化时候，天气图标与背景图片改变*/
        switch ($weather) {
            case 'Clear':
                $icon.addClass('wi-day-sunny');
                $body.css('background', 'url(https://images.pexels.com/photos/28121/pexels-photo-28121.jpg)');
                break;

            case 'Thunderstorm':
                $icon.addClass('wi-thunderstorm');
                $body.css('background', 'url(https://images.pexels.com/photos/29550/pexels-photo-29550.jpg)');
                break;

            case 'Clouds':
                $icon.addClass('wi-day-cloudy');
                $body.css('background', 'url(https://upload.wikimedia.org/wikipedia/commons/8/83/Sky_cloudy.JPG)');
                break;

            case 'Mist':
                $icon.addClass('wi-sprinkle');
                $body.css('background', 'url(https://images.pexels.com/photos/603/sky-clouds-sun.jpg)');
                break;

            case 'Extreme':
                $icon.addClass('wi-cloudy');
                $body.css('background', 'url(https://images.pexels.com/photos/325288/pexels-photo-325288.jpeg)');
                break;

            case 'Atmosphere':
                $icon.addClass('wi-windy');
                $body.css('background', 'url(https://images.pexels.com/photos/314726/pexels-photo-314726.jpeg)');
                break;

            case 'Snow':
                $icon.addClass('wi-snow');
                $body.css('background', 'url(https://images.pexels.com/photos/4022/cold-snow-forest-trees.jpeg)');
                break;

            case 'Rain':
                $icon.addClass('wi-rain');
                $body.css('background', 'url()');
                $body.css('background', 'url(http://www.publicdomainpictures.net/pictures/30000/velka/rain.jpg)');
                break;

            case 'Drizzle':
                $icon.addClass('wi-night-rain');
                $body.css('background', 'url(https://c1.staticflickr.com/7/6028/6009378383_a002798f38_b.jpg)');
                break;

            case 'Additional':
                $icon.addClass('wi-cloud');
                $body.css('background', 'url(https://upload.wikimedia.org/wikipedia/commons/d/d9/Wind_Power_at_Guanting_Resevoir.jpg)');
                break;

            default:
                $body.css('background', 'url(https://images.pexels.com/photos/2969/climate-cold-glacier-iceberg.jpg)');
                break;
        }
        $body.css('background-repeat', 'no-repeat');
        $body.css('background-size', '100% 100%');
    });
  //将风向的度数转化为方向
    function getWindDir(dir) {
        var windDir = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
        var windIndex = Math.floor(dir / 45);//共有8个方向总共360度，每个方向45度
        return windDir[windIndex];  　//返回风向对应的字符串
    }
});```

完整代码和演示，详见这个项目的codepen地址。