JS自动获取城市、天气预报【基于高德地图】

是洋洋a

于 2024-05-24 10:49:57 发布

阅读量1.3k

点赞数 32

分类专栏： HTML CSS JavaScript 文章标签：前端

本文链接：https://blog.csdn.net/zheshiyangyang/article/details/139162336

版权

JavaScript 同时被 3 个专栏收录

17 篇文章 1 订阅

订阅专栏

CSS

9 篇文章 0 订阅

订阅专栏

HTML

5 篇文章 0 订阅

订阅专栏

前言

最近开发个人网站，有个需求是可以自动精确定位用户所在城市，并且获得所在城市的天气预报，用来展示，查阅了很多资料，发现大多时间久远，很多API已经失效，因此作者费劲功夫终于做好，特别在这里记录一下，用来供小伙伴们使用~

先放一个效果图：

一.准备工作

1.1注册高德Key

注册地址：高德开放平台 | 高德地图API

1.2配置Key

注册好高德API后，我们需要进入“高德控制台”(刚注册好会自动跳转)，如果不小心关闭了，可以点击这个网址进入：我的应用 | 高德控制台 (amap.com)

进入页面，我们在左侧导航栏点击“应用管理”->“我的应用”：

此时，我们点击页面的右上角“创建新应用”：

应用名称随便写一个
类型选“出行”

创建好后，我们点击刚才创建好的应用“添加Key”

key名字随便起一个
服务平台选择：“Web平台”
可使用服务里，我们重点注意：“IP定位API”、“天气查询API”
IP白名单，如果留空代表所有IP使用Key均可以访问，否则只有指定IP才能访问

添加完成后，我们可以点击“查看配额”，里面记录了高德所有API每天可以使用的次数

其中：

IP定位每天可以使用5000次，天气预报可以使用300000次，足够使用了

二.查看API文档

2.1使用思路

在这里，我们整个的思路是：“使用IP定位API查询用户IP所在城市adcode(城市代码)”---->“使用天气预报API配合adcode(城市代码)查询天气预报”

“IP定位API文档”网址：

IP定位-基础 API 文档-开发指南-Web服务 API | 高德地图API (amap.com)

“天气预报API文档”网址：

天气查询-基础 API 文档-开发指南-Web服务 API | 高德地图API (amap.com)

2.2IP定位API文档

在这里，我们分析参数“ip”发现可以留白，只要留白就自动获取客户http请求进行定位，我们使用这种方式，省去查询用户IP的步骤

于是，我们所需要的URL拼接为：

https://restapi.amap.com/v3/ip?output=json&key=用户的key

返回的格式为JSON格式，我们也可以在“output”参数中指定返回格式：“JSON”或“XML”，小伙伴们可以动手试一下：

一个返回示例：

具体的参数在这里不作介绍，感兴趣的可以查看官方文档，我们需要使用的是：“adcode”用来确定用户城市代码

2.3天气查询API文档

我们在这里主要配置“city”用来查询目标城市天气预报，因此我们拼接的URL为：

https://restapi.amap.com/v3/weather/weatherInfo?city=adcode&key=用户key

一个返回示例：

三.代码

3.1HTML部分

随便写了一个界面，大家将就看一下吧

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>IP/天气</title>
		<link rel="stylesheet" href="/css/ip.css">
		<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css">
		<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	</head>
	<body>
		<div class="box1">
			<div class="box2">
                <div>
					<span id="crtp" class="span1"></span>
					<span id="interval_tp" class="span2"></span>
				</div>
				<span class="span3"><i class="layui-icon layui-icon-location" style="color:#65B0FF"></i><span id="coordinate"></span></span>
            </div>
			<div class="box3">
				<span id="crdate" class="span4"></span>
				<div class="box4">
					<img src="anime_avatar.png">
				</div>
				<span id="weekday" class="span5"></span>
			</div>
		</div>
	</body>
</html>

效果图：

注意：

需要引入Layui库用来生成定位图标
引入JQuery库用来实现JS异步get
ip.css是个人css文件，下面会解释

3.2CSS部分(ip.css文件)

body {
    background-color: aqua;
}

img {
    max-width: 72px;
    height: auto;
}

* {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}

.box1 {
    display: flex;
    position: relative;
    width: 290px;
    margin-right: 1.5rem;
    background-color: white;
    border-radius: 15px;
    justify-content: space-between;
    padding: 1.5rem;
}

.box2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.box3 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.box4 {
    position: relative;
    width: 72px;
    margin-bottom: 0.75rem;
}

.span1 {
    display: block;
    font-size: 1.875rem;
    line-height: 2.25rem;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.span2 {
    --tw-text-opacity: 1;
    color: rgb(102 102 102 / var(--tw-text-opacity));
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.span3 {
    display: flex;
    align-items: center;
}

.span4 {
    --tw-text-opacity: 1;
    color: rgb(102 102 102 / var(--tw-text-opacity));
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin-bottom: 10px;
}

.span4 {
    --tw-text-opacity: 1;
    color: rgb(102 102 102 / var(--tw-text-opacity));
    font-size: 0.875rem;
    line-height: 1.25rem;
}

3.3JS部分

    <script>
        //获取实时日期、温度、地区
        $(function(){
            const dateMap = ["周天","周一","周二","周三","周四","周五","周六"];
            const weekdayMap = ["零","一","两","三","四","五"];
            const urlIp = "https://restapi.amap.com/v3/ip?output=json&key=你的key";
            const date = new Date();
            $("#crdate").text(date.getMonth() + 1 + "-" + date.getDate() + " " + dateMap[date.getDay()]);
            if(date.getDay() == 6 || date.getDay() == 0){
                $("#weekday").text("好好享受周末吧~");
            }
            else{
                $("#weekday").text("再坚持" + weekdayMap[(6 - date.getDay())] + "天就到周末啦~");
            }
            $.get(urlIp,function(ip){
                const city = ip["city"];
                ip = ip["adcode"];
                const urlWeatherBase = "https://restapi.amap.com/v3/weather/weatherInfo?city=" + ip + "&extensions=base&key=你的key";
                const urlWeatherAll = "https://restapi.amap.com/v3/weather/weatherInfo?city=" + ip + "&extensions=all&key=你的key";
                $("#coordinate").text(city);
                $.get(urlWeatherBase,function(weather){
                    const temperature = weather["lives"][0]["temperature"];
                    const weather_log = weather["lives"][0]["weather"];
                    $("#crtp").text(temperature + "°");
                    $.get(urlWeatherAll,function(data){
                        const daytemp = data["forecasts"][0]["casts"][0]["daytemp"];
                        const nighttemp = data["forecasts"][0]["casts"][0]["nighttemp"];
                        $("#interval_tp").text(nighttemp + "° " + "/ " + daytemp + "°" + "\xa0\xa0\xa0" + weather_log);
                    });
                });
            });
        });
    </script>

3.4汇总代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>IP/天气</title>
		<link rel="stylesheet" href="/css/ip.css">
		<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css">
		<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	</head>
	<body>
		<div class="box1">
			<div class="box2">
                <div>
					<span id="crtp" class="span1"></span>
					<span id="interval_tp" class="span2"></span>
				</div>
				<span class="span3"><i class="layui-icon layui-icon-location" style="color:#65B0FF"></i><span id="coordinate"></span></span>
            </div>
			<div class="box3">
				<span id="crdate" class="span4"></span>
				<div class="box4">
					<img src="anime_avatar.png">
				</div>
				<span id="weekday" class="span5"></span>
			</div>
		</div>
		<script>
			//获取实时日期、温度、地区
			$(function(){
				const dateMap = ["周天","周一","周二","周三","周四","周五","周六"];
				const weekdayMap = ["零","一","两","三","四","五"];
				const urlIp = "https://restapi.amap.com/v3/ip?output=json&key=你的Key";
				const date = new Date();
				$("#crdate").text(date.getMonth() + 1 + "-" + date.getDate() + " " + dateMap[date.getDay()]);
				if(date.getDay() == 6 || date.getDay() == 0){
					$("#weekday").text("好好享受周末吧~");
				}
				else{
					$("#weekday").text("再坚持" + weekdayMap[(6 - date.getDay())] + "天就到周末啦~");
				}
				$.get(urlIp,function(ip){
					const city = ip["city"];
					ip = ip["adcode"];
					const urlWeatherBase = "https://restapi.amap.com/v3/weather/weatherInfo?city=" + ip + "&extensions=base&key=你的Key";
					const urlWeatherAll = "https://restapi.amap.com/v3/weather/weatherInfo?city=" + ip + "&extensions=all&key=你的Key";
					$("#coordinate").text(city);
					$.get(urlWeatherBase,function(weather){
						const temperature = weather["lives"][0]["temperature"];
						const weather_log = weather["lives"][0]["weather"];
						$("#crtp").text(temperature + "°");
						$.get(urlWeatherAll,function(data){
							const daytemp = data["forecasts"][0]["casts"][0]["daytemp"];
							const nighttemp = data["forecasts"][0]["casts"][0]["nighttemp"];
							$("#interval_tp").text(nighttemp + "° " + "/ " + daytemp + "°" + "\xa0\xa0\xa0" + weather_log);
						});
					});
				});
			});
		</script>
	</body>
</html>

效果图：