如何在openweather API中获取地理位置信息 [英] How do I get geolocation in openweather API
问题描述
<！DOCTYPE html>
< html>
< head>
< link rel =stylesheethref =http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css>
< link rel =stylesheethref =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（）>获取我的位置。< / button>
< p id =demo>< / p>
< script>
var x = document.getElementById（demo）;
函数getLocation（）{
if（navigator.geolocation）{
navigator.geolocation.getCurrentPosition（showPosition）;
} else {
x.innerHTML =此浏览器不支持地理定位。;
}
}
function showPosition（position）{
x.innerHTML =Latitude：+ position.coords.latitude +
<经度：+ position.coords.longitude;
}
< / script>
< p>外面的天气是：< / p>
< div class =weather>
糟糕..目前您的位置没有温度可用。
< / div>
< / div>
< / body>
< / html>
我的 JavaScript 代码：
$（document）.ready（function（）{
$ .getJSON（http://api.openweathermap.org /data/2.5/weather?q=Eindhoven&appid=9334f947893792dcb9b2e2c05ae23eb0，函数（data）{
$（'。weather'）。html（Math.round（data.main.temp-273）+'degrees Celcius'）;
}）;
}）;
我得到了埃因霍温市的天气，但我希望能够将其调整到纬度和经度。
有人可以为我修复我的代码吗？并帮助我？
我知道它与这个链接有关：api.openweathermap.org/data/2.5/weather?lat={lat}&lon = {lon}但我不知道如何实现自己的fount经度和纬度...
可以使用第三方API获取有关位置的数据，例如：： http：// ip-api。 com /
var getIP ='http://ip-api.com/json/';
$ .getJSON（getIP）.done（函数（位置）{
console.log（位置）
}）
接下来使用我们获得的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 （函数（weather）{
console.log（weather）
}）
}）
在这种情况下，摄氏温度（公制） b
$ b
或者使用HTML5地理定位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 （函数（位置）{
$ .getJSON（openWeatherMap，{
lat：position.coords.latitude，
lon：position.coords.longitude，
单位：'metric'，
APPID：'APIKEY'
}）。done（function（weather）{
console.log（weather）
}）
} ）
}
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>
And my JavaScript code:
$(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?
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...
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)
})
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)
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屋！
