JavaScript 中怎么用 BOM 操作实现一个获取当前地理位置天气-js教程-PHP中文网

javascript无法直接获取天气，需先用navigator.geolocation获取经纬度，再调用openweather等第三方api查询。

javascript 中怎么用 bom 操作实现一个获取当前地理位置天气

JavaScript 本身不能直接获取天气，BOM（Browser Object Model）也不提供天气 API；它只提供 navigator.geolocation 获取用户地理位置（经纬度），后续必须调用第三方天气服务（如 OpenWeather、WeatherAPI）才能查天气。

1. 先用 BOM 的 Geolocation API 获取当前位置

这是整个流程的第一步，也是唯一由浏览器原生支持的环节：

调用 navigator.geolocation.getCurrentPosition() 请求用户授权并获取经纬度
需在 HTTPS 环境或 localhost 下运行，否则现代浏览器会拒绝定位
必须处理成功和失败两种回调，比如用户拒绝授权、定位超时或不可用

2. 用获取到的经纬度请求天气接口

拿到 latitude 和 longitude 后，发起 HTTP 请求（推荐 fetch）调用公开天气 API：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

例如 OpenWeather： https://api.openweathermap.org/data/2.5/weather?lat=39.90&lon=116.40&appid=YOUR_KEY&units=metric
注意替换 YOUR_KEY 为在官网免费注册获取的 API key
units=metric 表示摄氏度，也可用 imperial（华氏）

3. 完整可运行示例（含错误处理）

以下代码整合了定位 + 天气请求，已简化为单次执行逻辑：

function getWeatherByLocation() {
  if (!navigator.geolocation) {
    console.error("浏览器不支持地理位置");
    return;
  }

  navigator.geolocation.getCurrentPosition(
    // 成功回调
    (position) => {
      const { latitude, longitude } = position.coords;
      const apiKey = "your_openweather_api_key_here";
      const url = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${apiKey}&units=metric`;

      fetch(url)
        .then(res => {
          if (!res.ok) throw new Error(`HTTP ${res.status}`);
          return res.json();
        })
        .then(data => {
          const temp = data.main.temp;
          const desc = data.weather[0].description;
          const city = data.name || "未知地点";
          console.log(`${city}：${temp}°C，${desc}`);
        })
        .catch(err => console.error("获取天气失败：", err));
    },
    // 失败回调
    (error) => {
      console.error("定位失败：", error.message);
      // 常见错误码：1=拒绝授权，2=定位不可用，3=超时
    }
  );
}

getWeatherByLocation();