您当前的位置: 首页 > 

漏刻有时

暂无认证

  • 2浏览

    0关注

    717博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

高德地图web服务API接口开发:获取IP定位显示当前位置的天气预报解决方案

漏刻有时 发布时间:2020-10-22 11:46:33 ,浏览量:2

在这里插入图片描述

获取当前的IP定位
    //获取当前的IP定位;
    var key = "4d9a765939a2b76588a3341c2***"
    var url = "https://restapi.amap.com/v3/ip?key=" + key;
    $.getJSON(url, function (res) {
        //console.log(res);
        var adcode = res.adcode;
        $("#ip").html("当前位置:" + res.province + res.city);
        //显示天气情况;
        getWeather(adcode, key)
    })
获取天气情况函数
    //天气函数;
    function getWeather(adcode, key) {
        /*天气查询API*/
        var url = 'https://restapi.amap.com/v3/weather/weatherInfo?city=' + adcode + '&key=' + key + '&extensions=all';
        $.getJSON(url, function (res) {
            //console.log(res);
            //当前星期;
            $(".date-dayname").html(getWeek(res.forecasts[0].casts[0].week));
            //当前时间;
            $(".date-day").html(res.forecasts[0].reporttime.slice(0, 10));
            //所在地区;
            $(".location").html(res.forecasts[0].city);
            //当天温度;
            $(".weather-temp").html(res.forecasts[0].casts[0].daytemp + "°C");
            //当天天气现象;
            $(".weather-desc").html(res.forecasts[0].casts[0].dayweather);

            //当天风力;
            $("#daypower").html(res.forecasts[0].casts[0].daypower);
            //当天风向;
            $("#daywind").html(res.forecasts[0].casts[0].daywind);
            //当天天气现象;
            $("#dayweather").html(res.forecasts[0].casts[0].dayweather);

            //四日预报,星期
            $("#week0").html(getWeek(res.forecasts[0].casts[0].week));
            $("#week1").html(getWeek(res.forecasts[0].casts[1].week));
            $("#week2").html(getWeek(res.forecasts[0].casts[2].week));
            $("#week3").html(getWeek(res.forecasts[0].casts[3].week));
            //四日预报,温度
            $("#temp0").html(res.forecasts[0].casts[0].daytemp + "°C");
            $("#temp1").html(res.forecasts[0].casts[1].daytemp + "°C");
            $("#temp2").html(res.forecasts[0].casts[2].daytemp + "°C");
            $("#temp3").html(res.forecasts[0].casts[3].daytemp + "°C");

            //天气图标;
            $("#icon").html(getIcon(0, "day", res.forecasts[0].casts[0].dayweather));
            $("#icon0").html(getIcon(1, "day", res.forecasts[0].casts[0].dayweather));
            $("#icon1").html(getIcon(1, "day", res.forecasts[0].casts[1].dayweather));
            $("#icon2").html(getIcon(1, "day", res.forecasts[0].casts[2].dayweather));
            $("#icon3").html(getIcon(1, "day", res.forecasts[0].casts[3].dayweather));
        })
    }
判断星期
    //判断星期;
    function getWeek(week) {
        switch (week) {
            case "1":
                return "星期一"
                break;
            case "2":
                return "星期二"
                break;
            case "3":
                return "星期三"
                break;
            case "4":
                return "星期四"
                break;
            case "5":
                return "星期五"
                break;
            case "6":
                return "星期六"
                break;
            case "7":
                return "星期日"
                break;
            default:
                return "异常"
        }
    }
判断天气情况返回对应图图标
    //按天气情况返回对应图图标;
    /* local图标位置,0->60px;1->30px;
     * times,day->白天;night->晚上;
     * desc天气描述;
     */
    function getIcon(local, times, desc) {
        var iconWidth, url;
        //图标尺寸判断;
        if (local == 0) {
            iconWidth = "80px";
        } else {
            iconWidth = "30px";
        }
        //图标类型判断;
        if (times == "day") {
            url = "img/day/"
        } else {
            url = "img/night/"
        }
        //天气描述图标;
        switch (desc) {
            case "晴":
                return ''
                break;
            case "多云":
                return ''
                break;
            case "阴":
                return ''
                break;
            case "阵雨":
                return ''
                break;
            case "雷阵雨":
                return ''
                break;
            case "雷阵雨并伴有冰雹":
                return ''
                break;
            case "雨夹雪":
                return ''
                break;
            case "小雨":
                return ''
                break;
            case "中雨":
                return ''
                break;
            case "大雨":
                return ''
                break;
            case "暴雨":
                return ''
                break;
            case "大暴雨":
                return ''
                break;
            case "特大暴雨":
                return ''
                break;
            case "阵雪":
                return ''
                break;
            case "小雪":
                return ''
                break;
            case "中雪":
                return ''
                break;
            case "大雪":
                return ''
                break;
            case "暴雪":
                return ''
                break;
            case "雾":
                return ''
                break;
            case "冻雨":
                return ''
                break;
            case "沙尘暴":
                return ''
                break;
            case "霾":
                return ''
                break;
            case "雨":
                return ''
                break;
            case "雪":
                return ''
                break;
            default:
                return "异常"
        }
    }
html代码

    
        
        
            
            
        
        
            
            
        
    
    
        
            
                风力
                    
                
                风向
                    
                
                天气现象
                    
                
            
        
        
            
                
                
                
                
                
                
                
                
                
            
        
        
            
        
    

Done!

关注
打赏
1661217259
查看更多评论
立即登录/注册

微信扫码登录

0.0424s