HTML5在线如何制作天气应用 HTML5在线API调用的实战教程-html教程-PHP中文网

HTML5在线如何制作天气应用 HTML5在线API调用的实战教程

雪夜

发布： 2025-10-27 14:53:02

原创

518人浏览过

首先获取用户地理位置，再调用OpenWeatherMap API获取天气数据，最后将温度、城市、天气状况等信息展示在页面中。

html5在线如何制作天气应用 html5在线api调用的实战教程

想做一个简单的天气应用？用HTML5结合公开的天气API，你可以快速实现一个能显示实时天气的小工具。整个过程不复杂，重点是理解如何获取用户位置、调用第三方API并展示数据。下面是一个实用的实战教程，带你一步步完成。

获取用户地理位置

HTML5的Geolocation API可以获取用户的经纬度，这是定位城市、查询天气的基础。

navigator.geolocation.getCurrentPosition() 是核心方法，使用时需要用户授权。

示例代码：

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    const lat = position.coords.latitude;
    const lon = position.coords.longitude;
    getWeather(lat, lon);
  }, function() {
    alert("无法获取您的位置");
  });
} else {
  alert("您的浏览器不支持地理定位");
}

登录后复制

调用天气API（以OpenWeatherMap为例）

OpenWeatherMap 提供免费的天气接口，注册后可获得API密钥。

立即学习“前端免费学习笔记（深入）”；

根据经纬度请求当前天气的接口地址：

https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={your_api_key}&units=metric&lang=zh_cn

units=metric：温度单位为摄氏度
lang=zh_cn：返回中文描述
appid：替换为你在官网申请的密钥

使用 fetch 发起请求：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

function getWeather(lat, lon) {
  const apiKey = '你的API密钥';
  const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${apiKey}&units=metric&lang=zh_cn`;

  fetch(url)
    .then(response => response.json())
    .then(data => displayWeather(data))
    .catch(() => alert("获取天气信息失败"));
}

登录后复制

在页面中展示天气信息

将API返回的数据提取出来，更新到HTML元素中。

假设你的HTML结构如下：

<div id="weather">
  <h2><span id="city"></span></h2>
  <p>温度：<span id="temp"></span>°C</p>
  <p>天气：<span id="description"></span></p>
  <p>湿度：<span id="humidity"></span>%</p>
</div>

登录后复制

JavaScript 显示函数：

function displayWeather(data) {
  document.getElementById('city').textContent = data.name;
  document.getElementById('temp').textContent = Math.round(data.main.temp);
  document.getElementById('description').textContent = data.weather[0].description;
  document.getElementById('humidity').textContent = data.main.humidity;
}

登录后复制