javascript - 如何在 openweather API 中获取地理定位

标签 javascript geolocation openweathermap

如何让 mu openweather API 与地理定位一起使用?这是我当前的 html 代码:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
        <link rel="stylesheet" href="main.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type='text/javascript' src='app.js'></script>
    </head>
    <body>
        <div class="jumbotron">
            <button onclick="getLocation()">Get my location.</button>
            <p id="demo"></p>

            <script>
                var x = document.getElementById("demo");
                function getLocation() {
                    if (navigator.geolocation) {
                        navigator.geolocation.getCurrentPosition(showPosition);
                    } else { 
                        x.innerHTML = "Geolocation is not supported by this browser.";
                    }
                }

                function showPosition(position) {
                    x.innerHTML = "Latitude: " + position.coords.latitude + 
                                  "<br>Longitude: " + position.coords.longitude;    
                }
            </script>

            <p>The weather outside is: </p> 
            <div class= "weather">
                Oops.. there is no temperature available for your location right now.
            </div>
        </div>                                  
    </body>
</html>

还有我的 JavaScript 代码:

$(document).ready(function(){
    $.getJSON( "http://api.openweathermap.org/data/2.5/weather?q=Eindhoven&appid=9334f947893792dcb9b2e2c05ae23eb0", function( data ) {
        $('.weather').html(Math.round(data.main.temp-273)+ ' degrees Celcius');
    });

});

我得到了埃因霍温市的天气,但我希望能够根据纬度和经度对其进行调整。 有人可以为我修复我的代码吗?并帮助我?

我知道它与此链接有关:api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon} 但我不知道如何实现我自己的源纬度和其中的经度...

最佳答案

您可以使用第三方 API 获取有关位置的数据, 例如:http://ip-api.com/

var getIP = 'http://ip-api.com/json/';
$.getJSON(getIP).done(function(location) {
    console.log(location)
})

接下来使用我们在上面获得的 ip-api 从 OpenWeatherMap 服务获取 WeatherData

var getIP = 'http://ip-api.com/json/';
var openWeatherMap = 'http://api.openweathermap.org/data/2.5/weather'
$.getJSON(getIP).done(function(location) {
    $.getJSON(openWeatherMap, {
        lat: location.lat,
        lon: location.lon,
        units: 'metric',
        appid: 'APIKEY'
    }).done(function(weather) {
        console.log(weather)
    })
})

在这种情况下,摄氏温度(公制)

或者使用 HTML5 Geolocation API(在 Google Chrome 中只能使用 HTTPS 或在 localhost 上)

var openWeatherMap = 'http://api.openweathermap.org/data/2.5/weather'
if (window.navigator && window.navigator.geolocation) {
    window.navigator.geolocation.getCurrentPosition(function(position) {
        $.getJSON(openWeatherMap, {
            lat: position.coords.latitude,
            lon: position.coords.longitude,
            units: 'metric',
            appid: 'APIKEY'
        }).done(function(weather) {
            console.log(weather)
        })
    })
}

关于javascript - 如何在 openweather API 中获取地理定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33946925/

相关文章:

javascript - 设置光标/插入符号位置的最佳方法是什么?

javascript - Jquery 多选下拉过滤器?

javascript - 检测浏览器上安装的 geode、fire eagle 或 google gear

javascript - HTML5 地理定位不会在 Safari 浏览器上提示输入位置

c++ - 如何使用 C/c++ 库确定一个位置是否在另一个位置内?

javascript - 如何获取php var OpenWeatherMap中第二行js数据

javascript - TypeError : weatherItem. 坐标未定义 : coordinates: [weatherItem. coord.lon, weatherItem.coord.lat]

javascript - 函数式 JS 设置对象的所有属性

javascript - 如何使用 javascript 在我的 View 中重复特定的 C# 代码块,甚至应该这样做吗?

javascript - 如何使用 Javascript 的 OpenWeatherMap API?