利用高德地图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>

 运行:

 

posted @ 2017-05-09 11:26  九月彭于晏  阅读(1171)  评论(0编辑  收藏  举报