如何在 openweather API 中获取地理位置 [英] How do I get geolocation in openweather API

查看:24
本文介绍了如何在 openweather API 中获取地理位置的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

How do I get mu openweather API to work with geolocation? This is my current html code:

<!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');
    });

});

我得到了埃因霍温市的天气工作,但我希望能够将其调整为经纬度.有人可以为我修复我的代码吗?并帮助我?

I got the weather in Eindhoven city working, but I want to be able to adjust it to the latitude and longitude. Can someone fix my code for me? And help me?

我知道这与此链接有关:api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon} 但我不知道如何实现我自己的 fount经纬度在里面...

I know it has something to do with this link: api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon} but I don't know how to implement my own fount latitude and longitude in it...

推荐答案

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

You can get data about the location with use third-party API, for example: http://ip-api.com/

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

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

Next get WeatherData from OpenWeatherMap service using the ip-api that we got above

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)
    })
})

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

In this case, the celsius temperature (metric)

或使用 HTML5 Geolocation API(在 Google Chrome 中只能使用 HTTPSlocalhost)

Or using HTML5 Geolocation API (in Google Chrome work only with HTTPS or on 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)
        })
    })
}

这篇关于如何在 openweather API 中获取地理位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆