問題描述
如何讓 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" >
<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 中只能使用 HTTPS 或 localhost)
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 中獲取地理位置的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！