JavaScript获取本地城市和天气预报实现

最新推荐文章于 2024-03-22 15:39:12 发布

fjb2080

最新推荐文章于 2024-03-22 15:39:12 发布

阅读量3.6k

点赞数

分类专栏： WEB技术

WEB技术专栏收录该内容

60 篇文章 0 订阅

订阅专栏

转自：https://blog.csdn.net/hehexiaoxia/article/details/61918553

1、获取城市接口，新浪的接口相对简单。

URL：http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js

结果：

 
   [javascript] 
     
   view plain 
    copy 
    
var remote_ip_info = {"ret":1,"start":-1,"end":-1,"country":"\u4e2d\u56fd","province":"\u5317\u4eac","city":"\u5317\u4eac","district":"","isp":"","type":"","desc":""};

2、获取天气预报接口，因为baidu的接口有雾霾指数，所以选择了它。

URL：http://api.map.baidu.com/telematics/v3/weather?location=北京&output=json&ak=EGgzZ22dsboWQEcPQ6KDQLknQd3YkkkP

响应结果：

 
   [javascript] 
     
   view plain 
    copy 
    
{"error":0,"status":"success","date":"2017-03-13","results":[{"currentCity":"北京","pm25":"28","index":[{"title":"穿衣","zs":"较冷","tipt":"穿衣指数","des":"建议着厚外套加毛衣等服装。年老体弱者宜着大衣、呢外套加羊毛衫。"},{"title":"洗车","zs":"较适宜","tipt":"洗车指数","des":"较适宜洗车，未来一天无雨，风力较小，擦洗一新的汽车至少能保持一天。"},{"title":"旅游","zs":"适宜","tipt":"旅游指数","des":"天气较好，温度适宜，是个好天气哦。这样的天气适宜旅游，您可以尽情地享受大自然的风光。"},{"title":"感冒","zs":"较易发","tipt":"感冒指数","des":"昼夜温差较大，较易发生感冒，请适当增减衣服。体质较弱的朋友请注意防护。"},{"title":"运动","zs":"较不宜","tipt":"运动指数","des":"天气较好，但考虑天气寒冷，推荐您进行各种室内运动，若在户外运动请注意保暖并做好准备活动。"},{"title":"紫外线强度","zs":"中等","tipt":"紫外线强度指数","des":"属中等强度紫外线辐射天气，外出时建议涂擦SPF高于15、PA+的防晒护肤品，戴帽子、太阳镜。"}],"weather_data":[{"date":"周一 03月13日 (实时：14℃)","dayPictureUrl":"http://api.map.baidu.com/images/weather/day/qing.png","nightPictureUrl":"http://api.map.baidu.com/images/weather/night/qing.png","weather":"晴","wind":"南风微风","temperature":"14 ~ 2℃"},{"date":"周二","dayPictureUrl":"http://api.map.baidu.com/images/weather/day/qing.png","nightPictureUrl":"http://api.map.baidu.com/images/weather/night/duoyun.png","weather":"晴转多云","wind":"南风微风","temperature":"15 ~ 2℃"},{"date":"周三","dayPictureUrl":"http://api.map.baidu.com/images/weather/day/duoyun.png","nightPictureUrl":"http://api.map.baidu.com/images/weather/night/duoyun.png","weather":"多云","wind":"南风微风","temperature":"16 ~ 4℃"},{"date":"周四","dayPictureUrl":"http://api.map.baidu.com/images/weather/day/duoyun.png","nightPictureUrl":"http://api.map.baidu.com/images/weather/night/yin.png","weather":"多云转阴","wind":"南风微风","temperature":"17 ~ 5℃"}]}]}

3、简单应用

 
   [html] 
     
   view plain 
    copy 
    
  
<!DOCTYPE html>  
<html>  
  
<head>  
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">  
    <meta http-equiv="U-XA-Compatible" content="IE=edge,chrome=1">  
    <meta http-equiv="X-UA-Compatible" content="IE=9">  
    <meta name="viewport" content="width=device-width,initial-scale=1">  
    <meta name="renderer" content="webkit|ie-comp|ie-stand">  
    <script type="text/javascript" src="/static/js/1.4.3/jquery.min.js"></script>  
</head>  
  
<body>  
    <img id="cvsToday" src="">  
    <label id="lblWeather">--</label>  
    <label id="lblTemperature">--</label>  
    <label id="lblCurTemp">--</label>  
    <script type="text/javascript">  
        // 获取城市  
        var cityUrl = 'http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js';  
        $.getScript(  
            cityUrl,  
            function() {  
                var city = remote_ip_info.city; // 获取城市  
  
                // 获取天气预报  
                $.ajax({  
                    url: "http://api.map.baidu.com/telematics/v3/weather?location=" + city + "&output=json&ak=EGgzZ22dsboWQEcPQ6KDQLknQd3YkkkP",  
                    type: "get",  
                    dataType: "jsonp",  
                    scriptCharset: "gbk",  
                    success: function(baiduTQ) {  
                        try {  
                            if (baiduTQ == null || baiduTQ.error != 0 || baiduTQ.status != "success" || baiduTQ.results.count == 0) {  
                                document.getElementById("lblTemperature").innerHTML = "--";  
                                document.getElementById("lblWeather").innerHTML = "--";  
                                document.getElementById("lblCurTemp").innerHTML = "--";  
                                return;  
                            }  
                            if (baiduTQ.results[0].weather_data.length > 0) {  
                                var data = baiduTQ.results[0].weather_data[0];  
                                var split = data.date.split("：");  
                                document.getElementById("lblTemperature").innerHTML = city + "[" + data.temperature + "]";  
                                document.getElementById("lblWeather").innerHTML = data.weather;  
                                var curTemp = split.pop();  
                                document.getElementById("lblCurTemp").innerHTML = curTemp.substring(0, curTemp.length - 1);  
  
                                var imgPath = data.dayPictureUrl;  
                                document.getElementById("cvsToday").src = imgPath;  
                            }  
                        } catch (err) {  
                            alert(err)  
                        }  
                    }  
                });  
            });  
    </script>  
</body>  
  
</html>  

结果展示：

fjb2080

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
JavaScript获取本地城市和天气预报实现

转自：https://blog.csdn.net/hehexiaoxia/article/details/619185531、获取城市接口，新浪的接口相对简单。URL：http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js结果：[javascript] view plain copyvar remote_ip_info = {"re...
复制链接

扫一扫