从开放天气中提取信息 API

Question

我正在 Code Pen 上编写一个网络应用程序，它获取用户位置并显示当前当地天气。我成功拉取了经纬度，但是我似乎无法从API调用中拉取我需要的JSON信息。

我正在用 AJAX 解析它，我相信我已经完成了 Official API Documentation 的要求，但是它不起作用，数据甚至没有显示在 控制台。我浏览了很多答案，但无法正常工作。

我想在blockquote

里面添加信息

if (navigator.geolocation) {
    //Return the user's longitude and latitude on page load using HTML5 geolocation API
    window.onload = function () {
    function getCurrentLocation (position) {
        
        latitude = position.coords.latitude;
        longitude = position.coords.longitude;
      
      console.log(latitude);
      console.log(longitude);

      $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&APPID=b7aaa3a349294d5706002e82df3de1ea&units=metric", function (data) {
        console.log(data);
        console.log(weather.main.temp);
        $(".city").append(name + " ");
        $(".temperature").append(temp + " ");
        $(".weatherdescription").append(field + " ");
            })
          
        };
    }
   
      navigator.geolocation.getCurrentPosition(getCurrentLocation);
    };

<h1 class="jumbotron" style="color:white"><em>The Weather Today</em></h1>

<div class="container-fluid">
  <div class = "row text-center">
  </div>
  <div id="weather" class = "row text-center">
    <div class = "col-xs-12 well message">
      <blockquote id = "raw_json">
        <div class="weatherbox">

      <strong class="city">{CITY NAME HERE}</strong>
    <br/>
      <span class="temperature">{X} °C</span>
    <br/>
      <span class="weatherdescription">{WEATHER DESCRIPTION HERE}</span>
        <br/>

    </div>
    </blockquote>
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      
    </div>
  </div>
</div>

Answer 1

用下面的代码替换您的 javascript 代码，它应该可以工作。

if (navigator.geolocation) {
    //Return the user's longitude and latitude on page load using HTML5 geolocation API
    window.onload = function () {
        navigator.geolocation.getCurrentPosition(getCurrentLocation);

    }

}


function getCurrentLocation(position) {

    latitude = position.coords.latitude;
    longitude = position.coords.longitude;

    console.log(latitude);
    console.log(longitude);

    $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&APPID=b7aaa3a349294d5706002e82df3de1ea&units=metric", function (data) {
        console.log(data);
        console.log(weather.main.temp);
        $(".city").append(name + " ");
        $(".temperature").append(temp + " ");
        $(".weatherdescription").append(field + " ");
    })

};

编码： https://codepen.io/azimjs/pen/KXybpa?editors=0011

从开放天气中提取信息 API

Pulling Information from Open Weather API

javascript

jquery

json

openweathermap

codepen