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

获取当前的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 '<img src="' + url + '00.png" width=' + iconWidth + '>'
                break;
            case "多云":
                return '<img src="' + url + '01.png" width=' + iconWidth + '>'
                break;
            case "阴":
                return '<img src="' + url + '02.png" width=' + iconWidth + '>'
                break;
            case "阵雨":
                return '<img src="' + url + '03.png" width=' + iconWidth + '>'
                break;
            case "雷阵雨":
                return '<img src="' + url + '04.png" width=' + iconWidth + '>'
                break;
            case "雷阵雨并伴有冰雹":
                return '<img src="' + url + '05.png" width=' + iconWidth + '>'
                break;
            case "雨夹雪":
                return '<img src="' + url + '06.png" width=' + iconWidth + '>'
                break;
            case "小雨":
                return '<img src="' + url + '07.png" width=' + iconWidth + '>'
                break;
            case "中雨":
                return '<img src="' + url + '08.png" width=' + iconWidth + '>'
                break;
            case "大雨":
                return '<img src="' + url + '09.png" width=' + iconWidth + '>'
                break;
            case "暴雨":
                return '<img src="' + url + '10.png" width=' + iconWidth + '>'
                break;
            case "大暴雨":
                return '<img src="' + url + '11.png" width=' + iconWidth + '>'
                break;
            case "特大暴雨":
                return '<img src="' + url + '12.png" width=' + iconWidth + '>'
                break;
            case "阵雪":
                return '<img src="' + url + '13.png" width=' + iconWidth + '>'
                break;
            case "小雪":
                return '<img src="' + url + '14.png" width=' + iconWidth + '>'
                break;
            case "中雪":
                return '<img src="' + url + '15.png" width=' + iconWidth + '>'
                break;
            case "大雪":
                return '<img src="' + url + '16.png" width=' + iconWidth + '>'
                break;
            case "暴雪":
                return '<img src="' + url + '17.png" width=' + iconWidth + '>'
                break;
            case "雾":
                return '<img src="' + url + '18.png" width=' + iconWidth + '>'
                break;
            case "冻雨":
                return '<img src="' + url + '19.png" width=' + iconWidth + '>'
                break;
            case "沙尘暴":
                return '<img src="' + url + '20.png" width=' + iconWidth + '>'
                break;
            case "霾":
                return '<img src="' + url + '53.png" width=' + iconWidth + '>'
                break;
            case "雨":
                return '<img src="' + url + '301.png" width=' + iconWidth + '>'
                break;
            case "雪":
                return '<img src="' + url + '302.png" width=' + iconWidth + '>'
                break;
            default:
                return "异常"
        }
    }

html代码

<div class="container">
    <div class="weather-side">
        <div class="weather-gradient"></div>
        <div class="date-container">
            <h2 class="date-dayname"></h2><span class="date-day"></span>
            <i class="location-icon"></i><span class="location"></span>
        </div>
        <div class="weather-container"><i class="weather-icon" id="icon"></i>
            <h1 class="weather-temp"></h1>
            <h3 class="weather-desc"></h3>
        </div>
    </div>
    <div class="info-side">
        <div class="today-info-container">
            <div class="today-info">
                <div class="precipitation"><span class="title">风力</span><span class="value" id="daypower"></span>
                    <div class="clear"></div>
                </div>
                <div class="humidity"><span class="title">风向</span><span class="value" id="daywind"></span>
                    <div class="clear"></div>
                </div>
                <div class="wind"><span class="title">天气现象</span><span class="value" id="dayweather"></span>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
        <div class="week-container">
            <ul class="week-list">
                <li><i class="day-icon" id="icon0"></i><span class="day-name" id="week0"></span><span class="day-temp"
                                                                                                      id="temp0"></span>
                </li>
                <li><i class="day-icon" id="icon1"></i><span class="day-name" id="week1"></span><span class="day-temp"
                                                                                                      id="temp1"></span>
                </li>
                <li><i class="day-icon" id="icon2"></i><span class="day-name" id="week2"></span><span class="day-temp"
                                                                                                      id="temp2"></span>
                </li>
                <li><i class="day-icon" id="icon3"></i><span class="day-name" id="week3"></span><span class="day-temp"
                                                                                                      id="temp3"></span>
                </li>
                <div class="clear"></div>
            </ul>
        </div>
        <div class="location-container">
            <button class="location-button"><span id="ip"></span></button>
        </div>
    </div>
</div>

Done！