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

运行：