高德地图api接口免费查询天气Ajax方法实现学习笔记

高德天气查询API接口使用笔记

木子木.

1451人浏览 · 2023-12-08 14:08:41

木子木. · 2023-12-08 14:08:41 发布

前言

课题作业天气查询：

教材所给出的天气查询api接口无法使用了，上网看了很多天气查询api，最后决定用高德地图的天气查询接口，记录一期摸索的过程。

一、高德地图API认证

使用高德地图api必须用到高德地图的key，所以需要先注册认真开发者账号

高德API接口使用文档链接: 高德官方API文档使用说明

1、注册认证登录高德开放平台

进入高德开放平台官网，选择对应方式进行认证后登录。
高德开放平台登录页

2、创建应用

需要先创建应用后才能获取我们使用接口所必须的key。

控制台→应用管理→我的应用
右上角选择创建新应用后填入所需的对应选项点击新建。
在这里插入图片描述

3、为应用添加key

应用创建完成后是没有任何内容的，需要先为你的应用添加一个key后才能让他拥有具体实现功能的方式。添加如图所示。
为应用添加key
注意：此处的服务平台需选择Web服务才可使用我们需要的天气查询api，如果选错了删除重新添加。

创建完成后，会得到一个key，这个key便是后面我们访问接口的密码。
key的显示页面

二、编写代码

这里使用js请求中的Ajax方法来编写

1.封装GET请求方法

在高德官方的api使用说明文档中可以看到是使用GET请求方式来访问接口的
代码如下：

function ajaxGet(url, params) {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: url,
      type: 'GET',
      data: params,
      success: function(response) {
        resolve(response);
      },
      error: function(error) {
        reject(error);
      }
    });
  });
}

这里把GET方法做了封装处理，处理了一下参数列表使其用起来看着更加舒适。
注意此处用到了jQuery库中的方法需要预先在html文件中引入jQuery库。

2.编写获取城市adcode代码的方法

网上能搜索到的使用Ajax方法实现使用高德api接口的基本都是一两年前的，那时候使用城市名称即可查询，但高德在更新后现在天气查询api仅支持使用城市的adcode代码来查询。天气查询API支持的请求参数
好在我们所创建的应用中还有另一个api接口：地理/逆地理编码。通过访问该接口即可用城市名称获取其所对应的adcode代码。因此我们才需要设计 getCity() 方法来实现获取想要查询的城市所对应的adcode代码以供后续的天气查询使用。
在代码中城市名称获取方式使用了jQuery方法获取html文件中id为"city"的元素，.val()方法则是获取了该元素的用户输入，即为我们想要查询adcode代码的城市名。
代码如下：

const key = '引号内容替换为你自己应用的key'  //方法外定义key减少复用

async function getCity() {
  const params = {
    key: key, // 高德密钥
    address: $('#city').val()
  };
  let res;
  try {
    res = await ajaxGet('https://restapi.amap.com/v3/geocode/geo?parameters', params);
    return res.geocodes[0].adcode;
  } catch (error) {
	console.error('Error:', error);
	console.log('Response:', res); 
    throw error;
  }
}

用return res.geocodes[0].adcode;来获取返回值（即城市对应的adcode代码）。
通过在 return 操作前添加console.log('Response:', res); 语句可以在浏览器开发者工具看到通过该接口的返回内容，其中便可以看到在数组 geocodes 下有我们想要获取的城市adcode代码，用 return 将其返回就好了。
地理/逆地理编码接口返回内容
到这里 getCity() 方法的内容已经实现，获取到了我们想要的城市所对应的adcode代码，可以在接下来的天气查询方法中直接调用它了。

3、用adcode代码查询天气

高德官方API文档使用说明
现在我们已经得到了获取想要查询天气城市的adcode代码的方法，只需要调用 getCity() 方法后用获取到的adcode代码去GET天气查询API后输出对应的内容即可。代码如下：

async function getWeather() {
 try {
   const adcode = await getCity();
   const params = {
     key: key, 
     city: adcode,
     extensions: 'base'
   };
   const res = await ajaxGet('https://restapi.amap.com/v3/weather/weatherInfo?parameters', params);
   const weather = res.lives[0];
   document.getElementById("tem").innerHTML = "温度：" + weather.temperature + "℃";
   document.getElementById("weather").innerHTML = "天气现象：" + weather.weather;
   document.getElementById("wea").innerHTML = "风向/风力：" + weather.winddirection + "/" + weather.windpower;
   document.getElementById("localcity").innerHTML = "当前城市：" + weather.city;
   document.getElementById("date").innerHTML = "更新时间：" + weather.reporttime;
   var box = document.getElementById("box");
   box.style.display = "block";
 } catch (error) {
   throw error;
 }
}

总结

js部分的代码到此已经写完了，附上html和CSS代码

html部分代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script src="引号内js代码路径"></script>
		<link rel="stylesheet" href="css/8-3.css" />
	</head>
	<body background="引号内图片路径"> //背景图片自行替换
		<div class="title">
			<input id="city" placeholder="请输入城市名称" style="width: 300px;" />
			<button type="submit" onclick="getWeather()">获取天气信息</button><br />
		</div>
		<div class="box" id="box">
			<h3>实时天气信息</h3>
			<img src="引号内图片路径" id="img" />
			<ul>
				<li><a id="tem"></a></li>
				<li><a id="weather"></a></li>
				<li><a id="wea"></a></li>
				<li><a id="localcity"></a></li>
				<li><a id="date"></a></li>
			</ul>
		</div>
	</body>
</html>

CSS样式表部分代码如下：

body {
	background: #d8defd;
}

.title {
	margin: 50px auto;
	text-align: center;
}

.box {
	margin: 50px auto;
	border: 1px solid #426e91;
	width: 360px;
	background: #f9f9f9;
	display: none;
}

.box h3 {
	text-align: center;
}

.box img {
	display: block;
	width: 90%;
	border: 1px solid wheat;
	margin: 0px auto;
}

.box:hover {
	border: 1px solid white;
}