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

简介: 高德地图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!

相关文章
|
9天前
|
数据采集 搜索推荐 API
小红书笔记详情 API 接口的开发、应用与收益
小红书(RED)作为国内领先的生活方式分享平台,汇聚了大量用户生成内容(UGC),尤其是“种草”笔记。小红书笔记详情API接口为开发者提供了获取笔记详细信息的强大工具,包括标题、内容、图片、点赞数等。通过注册开放平台账号、申请API权限并调用接口,开发者可以构建内容分析工具、笔记推荐系统、数据爬虫等应用,提升用户体验和运营效率,创造新的商业模式。本文详细介绍API的开发流程、应用场景及潜在收益,并附上Python代码示例。
148 61
|
5天前
|
人工智能 Rust 安全
DeepClaude:结合 DeepSeek R1 和 Claude AI 各自优势开发的 AI 应用平台,支持 API 调用和零延迟的即时响应
DeepClaude 是一个开源的 AI 应用开发平台,结合了 DeepSeek R1 和 Claude 模型的优势,提供即时响应、端到端加密和高度可配置的功能。
161 4
DeepClaude:结合 DeepSeek R1 和 Claude AI 各自优势开发的 AI 应用平台,支持 API 调用和零延迟的即时响应
|
13天前
|
数据采集 Web App开发 API
FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
本文介绍了如何使用FastAPI和Selenium搭建RESTful接口,访问免版权图片网站Pixabay并采集图片及其描述信息。通过配置代理IP、User-Agent和Cookie,提高爬虫的稳定性和防封禁能力。环境依赖包括FastAPI、Uvicorn和Selenium等库。代码示例展示了完整的实现过程,涵盖代理设置、浏览器模拟及数据提取,并提供了详细的中文注释。适用于需要高效、稳定的Web数据抓取服务的开发者。
55 15
FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
|
5天前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
29 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
13天前
|
搜索推荐 数据挖掘 API
淘宝商品描述 API 接口的开发、应用与收益
淘宝商品描述API接口是淘宝开放平台提供的服务,允许开发者编程获取商品详情,如标题、价格、图片等。通过注册账号、申请权限并调用API,可构建比价工具、推荐系统、自动化上架工具等应用,提升用户体验与运营效率,创造新的商业模式。该接口为电商从业者提供了强大的数据支持和创新机会。
65 22
|
9天前
|
网络协议 Java Shell
java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
40 7
|
7天前
|
缓存 Java 应用服务中间件
java语言后台管理若依框架-登录提示404-接口异常-系统接口404异常如何处理-登录验证码不显示prod-api/captchaImage 404 (Not Found) 如何处理-解决方案优雅草卓伊凡
java语言后台管理若依框架-登录提示404-接口异常-系统接口404异常如何处理-登录验证码不显示prod-api/captchaImage 404 (Not Found) 如何处理-解决方案优雅草卓伊凡
35 5
|
10天前
|
供应链 搜索推荐 数据挖掘
阿里巴巴热卖商品推荐 API 接口的开发、应用与收益
阿里巴巴热卖商品推荐API为开发者提供了获取平台热卖商品信息的强大工具,涵盖商品标题、价格、销量等数据。通过注册开放平台账号、申请API权限并调用接口,开发者可构建热卖商品推荐系统、数据分析工具及供应链管理系统等应用,提升用户体验与运营效率,创造新的商业模式。该API采用RESTful风格,支持多种应用场景,助力电商从业者实现创新与增值。
60 7
|
12天前
|
供应链 数据挖掘 API
1688APP 原数据 API 接口的开发、应用与收益
1688作为阿里巴巴旗下的B2B平台,汇聚海量供应商和商品资源。其APP原数据API接口为开发者提供获取商品详细信息的强大工具,涵盖商品标题、价格、图片等。通过注册开放平台账号、申请API权限并调用接口,开发者可构建比价工具、供应链管理及自动化上架工具等应用,提升用户体验与运营效率,创造新的商业模式。示例代码展示了如何使用Python调用API并解析返回结果。
68 8
|
10天前
|
搜索推荐 数据挖掘 API
亚马逊详情 API 接口的开发、应用与收益
亚马逊详情API接口是亚马逊开放平台提供的强大工具,允许开发者编程获取商品的详细信息,如标题、价格、描述等。通过注册账号、申请权限并调用API,开发者可构建比价工具、推荐系统和数据分析工具等应用,提升用户体验与运营效率,创造新商业模式。本文详细介绍其开发流程、应用场景及潜在收益,并附代码示例。
28 6

热门文章

最新文章

  • 1
    打造高效的Web Scraper:Python与Selenium的完美结合
    13
  • 2
    Burp Suite Professional 2025.2 (macOS, Linux, Windows) - Web 应用安全、测试和扫描
    26
  • 3
    AppSpider Pro 7.5.015 for Windows - Web 应用程序安全测试
    20
  • 4
    【02】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-2月12日优雅草简化Centos stream8安装zabbix7教程-本搭建教程非docker搭建教程-优雅草solution
    55
  • 5
    部署使用 CHAT-NEXT-WEB 基于 Deepseek
    345
  • 6
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 7
    java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
    40
  • 8
    零基础构建开源项目OpenIM桌面应用和pc web- Electron篇
    28
  • 9
    【01】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-硬件设备实时监控系统运营版发布-本产品基于企业级开源项目Zabbix深度二开-分步骤实现预计10篇合集-自营版
    22
  • 10
    FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
    55