現在有很多天氣網站提供了免費或收費的api，如果每日通路量不高的話可以選擇免費的，下面便是使用和風天氣的api制作的一個顯示目前地區目前時間的天氣的網頁，當然如果需要天氣預報等也隻需要從擷取的json數組裡提取就是了。
上圖一張：
界面比較簡陋，重點隻在于背景擷取目前位置與目前天氣。
擷取目前經緯度代碼如下
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
lat = position.coords.latitude; //次元
lon = position.coords.longitude; //經度
});
} 根據經緯度擷取目前天氣代碼如下，免費注冊後會獲得一個免費的key，json格式請見官網。
var para = "https://free-api.heweather.com/v5/weather?city="+lon+","+lat+"&key=53153e2fed574ce19f5c089a1aacede0";
console.log(para);
$.getJSON(para,function(json){
var city= json["HeWeather5"][0]["basic"]["city"];
var cnty= json["HeWeather5"][0]["basic"]["cnty"];
var weatherNow = json["HeWeather5"][0]["now"]["cond"]["txt"];
degree=json["HeWeather5"][0]["now"]["tmp"]; 最後放上完整代碼：
html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>local weather</title>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container-fluid">
<div class="content">
<!-- <img src="http://file.digitaling.com/eImg/uimages/20150902/1441167475585128.gif"> -->
<div class="city">
<img src="img/Location.png">
<div id="cityname" style="display: inline;">城市</div>
</div>
<div class="weather">天氣</div>
<div class="degree">
<div class="tmp">30</div>
<div class="tmp-kind">°C</div>
<div class="tmp-change"><button class="btn-tmp-change btn btn-primary">Change °C or °F</button></div>
</div>
<div class="wind">北風3級</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html> css
*{
margin:0;
padding:0;
}
body{
overflow:none;
background: url("https://images.unsplash.com/photo-1465311530779-5241f5a29892?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=") no-repeat center center fixed;
background-size: cover;
}
/*
雷電：https://images.unsplash.com/photo-1431440869543-efaf3388c585?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=
雪：https://images.unsplash.com/photo-1483119624769-b1a73c256500?dpr=1&auto=format&fit=crop&w=1080&h=724&q=80&cs=tinysrgb&crop=
太陽：https://images.unsplash.com/photo-1472752112832-519166b23dfa?dpr=1&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=
雨：https://images.unsplash.com/photo-1417008914239-59b898b49382?dpr=1&auto=format&fit=crop&w=1080&h=708&q=80&cs=tinysrgb&crop=
*/
.content{
position: absolute;
margin-top: 10%;
margin-left: 20%;
margin-right: 20%;
width: 60%;
}
.city{
text-align: center;
}
.city>img{
width: 30px;
}
.city>div{
font-size: 28px;
vertical-align: middle;
color: rgb(255,102,102);
}
.weather{
text-align: center;
color: rgb(255,102,102);
font-size: 38px;
}
.degree{
text-align: center;
color: rgb(255,102,102);
font-size: 38px;
}
.degree div{
display: inline;
}
.degree .tmp-kind{
margin-left: 10px;
}
.degree .tmp-change{
margin-left: 30px;
}
.wind{
text-align: center;
color: rgb(255,102,102);
font-size: 38px;
} js
$(document).ready(function(){
var lat,lon;
var degree; //攝氏度
var tmpShow; //顯示的溫度，因為有攝氏與華氏度的轉換
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
lat = position.coords.latitude;
lon = position.coords.longitude;
console.log(lat+" "+lon);
var para = "https://free-api.heweather.com/v5/weather?city="+lon+","+lat+"&key=53153e2fed574ce19f5c089a1aacede0";
console.log(para);
$.getJSON(para,function(json){
var city= json["HeWeather5"][0]["basic"]["city"];
var cnty= json["HeWeather5"][0]["basic"]["cnty"];
var weatherNow = json["HeWeather5"][0]["now"]["cond"]["txt"];
degree=json["HeWeather5"][0]["now"]["tmp"];
tmpShow = degree;
var windShow = json["HeWeather5"][0]["now"]["wind"]["dir"]+" "+json["HeWeather5"][0]["now"]["wind"]["sc"]+"級";
//console.log(city);
$("#cityname").html(city+","+cnty);
$('.weather').html(weatherNow);
$(".tmp").html(tmpShow);
$(".wind").html(windShow);
});
});
}
$(".btn-tmp-change").on("click",function(){
console.log($(".tmp").html());
if(degree == $(".tmp").html()){
$(".tmp").html(degree*1.8+32);
$(".tmp-kind").html("°F");
console.log(degree);
console.log($(".tmp").html());
}else{
$(".tmp").html(degree);
$(".tmp-kind").html("°C");
}
});
}); ![與專家面對面：Android開發入門問與答[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)