利用高德地图Web API 显示天气信息查询
<!doctype html>
<html> <head> <meta charset="utf-8"> <title>天气信息查询</title> <style type="text/css"> .weather{ width: 60px; padding-left: 8px; display: inline-block; } #tip { background-color: #fff; padding-left: 10px; padding-right: 10px; position: absolute; font-size: 10px; right:0px; top: 0px; border-radius: 3px; border: 1px solid #ccc; line-height: 30px; } </style> </head> <body> <div id="tip" style="line-height: 12px"></div> <script type="text/javascript"> weather() function weather()//天气查询方法 { var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { //此句返回天气查询原始json数据 var weatherinfo = xmlhttp.responseText; var text = JSON.parse(weatherinfo); var data = text.lives[0]; var str = []; str.push('<div>城市/区:' + data.city + '</div>'); str.push('<div>天气:' + data.weather + '</div>'); str.push('<div>温度:' + data.temperature + '℃</div>'); str.push('<div>风向:' + data.winddirection + '</div>'); str.push('<div>风力等级:' + data.windpower + '</div>'); str.push('<div>空气湿度:' + data.humidity + '</div>'); str.push('<div>发布时间:' + data.reporttime + '</div>'); document.getElementById('tip').innerHTML = str.join('<br>'); //data数据类型为json 实例: // {"province" :"北京", //"city" :"东城区", //"adcode" :"110101", // "weather" :"晴", // "temperature" :"23", // "winddirection" :"北", // "windpower" :"9", // "humidity" :"15", //"reporttime" :"2017-04-18 16:00:00"} } } xmlhttp.open("GET","http://restapi.amap.com/v3/weather/weatherInfo?key=此处填写web密钥&address&city=310000",true); xmlhttp.send(); } </script> </body> </html>
运行: