高德api获取天气（详细步骤）

最新推荐文章于 2024-08-12 03:26:27 发布

冷酷吗喽

最新推荐文章于 2024-08-12 03:26:27 发布

阅读量696

点赞数 1

文章标签：高德api获取天气

本文链接：https://blog.csdn.net/m0_72189003/article/details/140559918

版权

1.登录高德开放平台，点击创建新应用，输入应用名称，选择应用类型，然后点击创建

2.点击添加key，按照以下步骤：

3.然后提交后点开就能看到你的key

4.以下就是示例代码：

<!-- 高德获取天气坐标 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="weather-info"></div>
</body>
<script>
     let xhr = new XMLHttpRequest();

// 发送请求
// city=后面写你自己的地区的坐标编码，key=后面写你自己的
xhr.open("GET", "https://restapi.amap.com/v3/weather/weatherInfo?city=410100&key=放你的key");
xhr.onload = function () {
    // if (xhr.readyState === 4 && xhr.status === 200) {
        let tianqi = JSON.parse(xhr.responseText);
        const liveWeather = tianqi.lives[0];
        console.log(tianqi);
        const a = document.getElementById('weather-info');
        a.innerHTML = `
            <h2>${liveWeather.province} ${liveWeather.city}</h2>
            <p>${liveWeather.weather}</p>
            <p>${liveWeather.temperature}°C</p>
            <p>${liveWeather.winddirection}</p>
            <p>${liveWeather.windpower}</p>
            <p>${liveWeather.humidity}%</p>
            <p>${liveWeather.reporttime}</p>
        `;
    // }
};
// xhr.onerror = function () {
//     console.log(xhr.status, xhr.statusText);
//     document.getElementById('weather-info').innerHTML = 'Failed to load weather information.';
// };
xhr.send();
</script>
</html>