Use the Ajax open platform API and js Ajax code to achieve positioning and obtain the weather conditions of the city
1. Register an account on the Amap open platform and obtain the Web service API application key for free
Amap Open Platform Web Service API
Click to apply for KEY according to API
After logging in, enter application management
Create a new application (name it as you like)
Then add the key and submit it
Then you can see the key you applied for
2. Write js Ajax code to achieve positioning of requested services.
<!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>
The effect is as follows:
After clicking the positioning button, you will get the positioning address
3. Obtain the weather conditions of the current city based on the obtained address positioning
According to the API, only the key and address are needed to obtain the weather conditions of a given address.
4. Write the corresponding Ajax code to implement automatically obtain the current city weather conditions and longitude and latitude or search for the weather conditions and longitude and latitude of a given address , search keywords to obtain surrounding information
The implementation code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 引入axios第三方请求库 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript">
// 1. 先自动定位城市
let currentCity = "";
function autoLocation() {
axios({
url: "https://restapi.amap.com/v3/ip",
method: "GET",
params: {
key: "e45ba07980d4a0817d2edeba0de23add",
},
}).then((data) => {
currentCity = data.data.city;
document.getElementById(
"city"
).innerText = `当前城市: ${
currentCity}`;
// 2. 根据城市查询天气, 获取经纬度坐标
getWeather(currentCity);
getGeolocation(currentCity);
});
}
autoLocation();
// 封装查询天气得函数: 自动定位城市和用户输入城市都需要调用
function getWeather(city) {
axios({
url: "https://restapi.amap.com/v3/weather/weatherInfo",
method: "GET",
params: {
key: "e45ba07980d4a0817d2edeba0de23add",
city: city,
},
}).then((data) => {
// console.log(data.data.lives[0]);
// const city = data.data.city;
document.getElementById(
"wea"
).innerText = `当前城市天气: ${
JSON.stringify(data.data.lives[0])}`;
});
}
// 查询按钮点击事件
function searchCity() {
const inp = document.getElementById("searchCity");
if (inp.value) {
getWeather(inp.value);
getGeolocation(inp.value);
} else alert("缺少关键字");
}
// 封装获取经纬度坐标得函数
function getGeolocation(city) {
axios({
url: "https://restapi.amap.com/v3/geocode/geo",
method: "GET",
params: {
key: "e45ba07980d4a0817d2edeba0de23add",
address: city,
},
}).then((data) => {
// console.log(data.data.geocodes[0].location);
document.getElementById(
"geo"
).innerText = `经纬度坐标: ${
data.data.geocodes[0].location}`;
});
}
// 检索周边信息
function poi() {
const inp = document.getElementById("poi");
if (inp.value) {
axios({
url: "https://restapi.amap.com/v3/place/text",
method: "GET",
params: {
key: "e45ba07980d4a0817d2edeba0de23add",
keywords: inp.value,
city: currentCity,
},
}).then((data) => {
console.log(data.data);
document.getElementById(
"pois"
).innerText = `周边有: ${
data.data.pois[0].address}`;
});
} else alert("缺少关键字");
}
</script>
</head>
<body>
<div>
<p id="city">当前城市: 未知</p>
<input id="searchCity" type="text" placeholder="输入城市" /><button
onclick="searchCity()"
>
查询
</button>
</div>
<p id="wea">当前城市天气: 未知</p>
<div>
<p id="geo">经纬度坐标: 位置</p>
<input id="poi" type="text" placeholder="输入检索关键字" /><button
onclick="poi()"
>
检索周边
</button>
<p id="pois">周边有：</p>
</div>
</body>
</html>
The running results are as follows:
