使用高德开放平台API和js的Ajax代码实现定位并获得城市的天气情况
1、注册高德开放平台账号，免费获得Web服务API应用key
高德开放平台Web服务API
按照API点击申请KEY
登录后进入应用管理
新建应用（随意起名）
然后添加key提交即可
然后就可以看到你申请的key
2、编写js的Ajax代码，实现请求服务得到定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<script>
function getLocation() {
axios
.get("https://restapi.amap.com/v3/ip", {
params: {
key: "e8e0bb95c623fd363f68ca5e3045b5b2",
},
})
.then((data) => {
console.log(data.data);
const span = document.getElementById("city");
span.innerText = data.data.city;
});
}
</script>
<body>
<button onclick="getLocation()">定位</button><span id="city">未知</span>
</body>
</html>
实现效果如下：
点击定位按钮后，得到定位地址
3、根据所获得地址定位获得当前城市的天气情况
