高德api获取天气(详细步骤)

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>

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-20 03:10:03       52 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-20 03:10:03       54 阅读
  3. 在Django里面运行非项目文件

    2024-07-20 03:10:03       45 阅读
  4. Python语言-面向对象

    2024-07-20 03:10:03       55 阅读

热门阅读

  1. Linux C++ 058-设计模式之解释器模式

    2024-07-20 03:10:03       21 阅读
  2. Swagger生成Api文档的增强解决方案--knife4j

    2024-07-20 03:10:03       21 阅读
  3. 虫虫老师---义务教育核心课程改革

    2024-07-20 03:10:03       14 阅读
  4. 面试题 16.07. 最大数值

    2024-07-20 03:10:03       16 阅读
  5. 【基础算法】排序

    2024-07-20 03:10:03       13 阅读
  6. 说说Vue2.0和Vue3.0有什么区别

    2024-07-20 03:10:03       16 阅读
  7. kubernetes学习日志(六)

    2024-07-20 03:10:03       12 阅读
  8. JWT身份验证、授权介绍、应用场景和示例代码

    2024-07-20 03:10:03       18 阅读
  9. VUE3【实用教程】(2024最新版)

    2024-07-20 03:10:03       19 阅读
  10. LLM推理需要占用多少显存

    2024-07-20 03:10:03       16 阅读
  11. 应届硕士职业生涯规划

    2024-07-20 03:10:03       16 阅读
  12. 2024 Linux 运维面试题分享-1

    2024-07-20 03:10:03       15 阅读