Javascript 如何在OpenWeatherAPI中获取地理位置_Javascript_Geolocation_Openweathermap

Javascript 如何在OpenWeatherAPI中获取地理位置

javascript geolocation

Javascript 如何在OpenWeatherAPI中获取地理位置,javascript,geolocation,openweathermap,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" h

如何让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>

我让埃因霍温市的天气正常工作，但我希望能够根据纬度和经度进行调整。有人能帮我修改代码吗？帮我

我知道它与这个链接有关：api.openweathermap.org/data/2.5/weather？lat={lat}&lon={lon}但我不知道如何在其中实现我自己的原始纬度和经度…

你可以使用第三方api获取有关该位置的数据，例如：

接下来，使用上面的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地理定位API（在Google Chrome中，只能使用

HTTPS

或

localhost

）

让我们尝试一下，我希望这是一个更好的解决方案，通过使用地理定位和OpenWeatherAPI来获取当前天气。只需传递OpenWeatherAPI密钥，您将获得一个json数组，获取您的位置和当前天气。你也可以使用你想要的天气图标

window.addEventListener("load",() =>{
    let long;
    let lag;
    
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition((position) =>{
        var lat = position.coords.latitude;
        var long = position.coords.longitude;
        const proxy = "https://cors-anywhere.herokuapp.com/";
        const api = `${proxy}api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&appid=9891731b361e47661f72b06213efbf65`;
        fetch(api) 
           .then((response) =>{
               return response.json();
           })
           .then(data =>{
               const {name} = data;
               const {feels_like} = data.main;
               const {id,main} = data.weather[0];
               loc.textContent = name;
               climate.textContent = main;
               tempValue.textContent = Math.round(feels_like-273);
               if(id < 250){
                   tempIcon.src = './icon/storm.svg'
               } 
               else if(id < 350){
                tempIcon.src = './icon/drizzle.svg'  
               }
               else if(id < 550){
                tempIcon.src = './icon/rain.svg'  
               }
               else if(id < 650){
                tempIcon.src = './icon/snow.svg'  
               }
               else if(id < 800){
                tempIcon.src = './icon/atmosphere.svg'  
               }
               else if(id === 800){
                tempIcon.src = './icon/clear.svg'  
               }
               else if(id >800){
                tempIcon.src = './icon/clouds.svg'  
               }
               console.log(data);
           })
        })  
    }
})

window.addEventListener（“加载”，（）=>{
让我们继续；
让我们滞后；
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（（位置）=>{
var lat=位置坐标纬度；
var long=位置坐标经度；
常量代理=”https://cors-anywhere.herokuapp.com/";
const-api=`${proxy}api.openweathermap.org/data/2.5/weather？lat=${lat}&lon=${long}&appid=9891731b361e47661f72b06213efbf65`；
获取（api）
。然后（（响应）=>{
返回response.json（）；
})
。然后（数据=>{
常量{name}=数据；
const{feels_like}=data.main；
const{id，main}=data.weather[0]；
loc.textContent=名称；
climate.textContent=main；
tempValue.textContent=Math.round（感觉像-273）；
如果（id<250）{
tempIcon.src='./icon/storm.svg'
} 
否则，如果（id<350）{
tempIcon.src='./icon/drizzle.svg'
}
否则，如果（id<550）{
tempIcon.src='./icon/rain.svg'
}
否则，如果（id<650）{
tempIcon.src='./icon/snow.svg'
}
否则，如果（id<800）{
tempIcon.src='./icon/atmosphere.svg'
}
否则如果（id==800）{
tempIcon.src='./icon/clear.svg'
}
否则，如果（id>800）{
tempIcon.src='./icon/clouds.svg'
}
控制台日志（数据）；
})
})  
}
})

谢谢！这似乎是一个很好的答案，但仍然不起作用。首先要知道弗里斯兰的当前位置，我不在弗里斯兰。第二，没有天气。@Maris ip api向您展示，您的位置是弗里斯兰，但您不在弗里斯兰？我理解正确吗？好啊第二。我在回答中写道，

$.getJSON（openWeatherMap，{

和

.done（函数（天气）{

必须在

$.getJSON（getIP）.done（函数（位置）{}）

是的，这是正确的。我这样做了，但它不起作用。

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

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

window.addEventListener("load",() =>{
    let long;
    let lag;
    
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition((position) =>{
        var lat = position.coords.latitude;
        var long = position.coords.longitude;
        const proxy = "https://cors-anywhere.herokuapp.com/";
        const api = `${proxy}api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&appid=9891731b361e47661f72b06213efbf65`;
        fetch(api) 
           .then((response) =>{
               return response.json();
           })
           .then(data =>{
               const {name} = data;
               const {feels_like} = data.main;
               const {id,main} = data.weather[0];
               loc.textContent = name;
               climate.textContent = main;
               tempValue.textContent = Math.round(feels_like-273);
               if(id < 250){
                   tempIcon.src = './icon/storm.svg'
               } 
               else if(id < 350){
                tempIcon.src = './icon/drizzle.svg'  
               }
               else if(id < 550){
                tempIcon.src = './icon/rain.svg'  
               }
               else if(id < 650){
                tempIcon.src = './icon/snow.svg'  
               }
               else if(id < 800){
                tempIcon.src = './icon/atmosphere.svg'  
               }
               else if(id === 800){
                tempIcon.src = './icon/clear.svg'  
               }
               else if(id >800){
                tempIcon.src = './icon/clouds.svg'  
               }
               console.log(data);
           })
        })  
    }
})