在Openweather上更改語言API

Question

我會盡力快速解決這個問題。我想用房地產天氣預報，使用這種codepen

var weatherData = { 
 
    city: document.querySelector ("#city"), 
 
    weather: document.querySelector ("#weather"), 
 
    temperature: document.querySelector("#temperature"), 
 
    temperatureValue: 0, 
 
    units: "°C" 
 
    
 
}; 
 

 
function roundTemperature(temperature){ 
 
\t \t \t temperature = temperature.toFixed(1); 
 
\t \t \t return temperature; 
 
\t \t } 
 

 
function switchUnits(){ 
 
    
 
    if (weatherData.units == "°C") { 
 
    weatherData.temperatureValue = roundTemperature(weatherData.temperatureValue * 9/5 + 32); 
 
    weatherData.units = "°F"; 
 
    
 
} else { 
 
    weatherData.temperatureValue = roundTemperature ((weatherData.temperatureValue -32) * 5/9); 
 
    weatherData.units = "°C"; 
 
} 
 

 
    weatherData.temperature.innerHTML = weatherData.temperatureValue + weatherData.units + " "; 
 
} 
 

 

 
function getLocationAndWeather(){ 
 
    if (window.XMLHttpRequest){ 
 
    var xhr = new XMLHttpRequest(); 
 
    xhr.addEventListener("load", function() { 
 
     var response = JSON.parse(xhr.responseText); 
 

 
     console.log(response); 
 
     var position = { 
 
     latitude: response.latitude, 
 
     longitude: response.longitude 
 
     }; 
 
     var cityName = response.city; 
 

 
     var weatherSimpleDescription = response.weather.simple; 
 
     var weatherDescription = response.weather.description; 
 
     var weatherTemperature = roundTemperature(response.weather.temperature); 
 

 
     weatherData.temperatureValue = weatherTemperature; 
 

 
     loadBackground(position.latitude, position.longitude, weatherSimpleDescription); 
 
     weatherData.city.innerHTML = cityName; 
 
     weatherData.weather.innerHTML = ", " + weatherDescription; 
 
     weatherData.temperature.innerHTML = weatherTemperature + weatherData.units; 
 
    }, false); 
 

 
    xhr.addEventListener("error", function(err){ 
 
     alert("Could not complete the request"); 
 
    }, false); 
 

 
    xhr.open("GET", "https://fourtonfish.com/tutorials/weather-web-app/getlocationandweather.php?owapikey=e2db5b0453a25a492e87ad8b03046a7c&units=metric", true); 
 
    xhr.send(); 
 
    } 
 
    else{ 
 
    alert("Unable to fetch the location and weather data."); 
 
    }   
 
} 
 

 

 
function loadBackground(lat, lon, weatherTag) { 
 
    var script_element = document.createElement('script'); 
 

 
    script_element.src = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=1452866c8cea54acd0075022ef573a07&lat=" + lat + "&lon=" + lon + "&accuracy=1&tags=" + weatherTag + "&sort=relevance&extras=url_l&format=json"; 
 
    
 
    document.getElementsByTagName('head')[0].appendChild(script_element); 
 
} 
 

 
function jsonFlickrApi(data){ 
 
    if (data.photos.pages > 0){ 
 
    //var randomPhotoId = parseInt(data.photos.total); 
 
    var photo = data.photos.photo[Math.floor(Math.random()*parseInt(data.photos.photo.length))]; 
 
    document.querySelector("body").style.backgroundImage = "url('" + photo.url_l + "')"; 
 
    document.querySelector("#image-source").setAttribute("href", "http://www.flickr.com/photos/" + photo.owner + "/" + photo.id); 
 
    } 
 
    else{ 
 
    document.querySelector("body").style.backgroundImage = "url('https://fourtonfish.com/tutorials/weather-web-app/images/default.jpg')"; 
 
    document.querySelector("#image-source").setAttribute("href", "https://www.flickr.com/photos/superfamous/310185523/sizes/o/"); 
 
    } 
 
} 
 

 
getLocationAndWeather();

body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family:Arial, sans-serif; 
 
    font-size: 2em; 
 
    text-shadow: 0 0 10px #000; 
 
    color: #fff; 
 
    background: #888; 
 
    bacground-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-size: cover; 
 
} 
 

 
section { 
 

 
    min-height: 100%; 
 
} 
 

 
h1 { 
 
    font-size: 2em; 
 
    padding: 0 0.3em; 
 
    line-height: 1em; 
 
    
 
} 
 

 
p { 
 
    padding: 0 1em; 
 
} 
 

 
a{ 
 
    color: #fff; 
 
} 
 

 
footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    font-size: 0.5em; 
 
} 
 

 
#temperature { 
 
    text-decoration: none; 
 
    border-bottom: 0.05em dotted white; 
 
}

<section> 
 
    <h1 id= "city">Weather Web App</h1> 
 
    <p> <a id="temperature" href="#" onclick="switchUnits(); return false;" title ="Click to switch between metric and impreial units"></a><span id = "weather"> by Shazam (tutorial from @fourtonfish)</p> 
 
</section> 
 

 
<footer> 
 
    <p>Powered by <a href="http://flickr.com/services/api/">Flickr</a> and <a href="http://openweathermap.org">Openweathermap.org</a>. 
 
    
 
    Created by <a href="https://twitter.com/steelcitycoach">@steelcitycoach</a>. <a id="image-source" href="#">Image source</a>.</p> 
 
    
 
</footer>

用PHP生成不同的結果，像阿迪達斯Ultraboost TR現場只見..

問題：我不能將「描述」改爲葡萄牙文（pt-br）。我已經看到OpenWeather文檔，他告訴我在URL上包含「& lang = pt」，但它不起作用。爲了完成這個問題，這是這個代碼的所有者的網站，但我沒有接觸到this page，我想我可以改變一些設置或類似的東西。如果您運行的片斷，這是我可以在響應改變：

「天氣」：{ 「簡單」：「清除」， - >「說明」：「晴朗的天空」，< -

因此，有兩種方法，我認爲你能幫助我：

1. 告訴我一個方法來改變「晴朗的天空」到「CÉU林波」或portguese相當於而不需要改變德PHP文件：

2. Giv我用一個燈來改變php的responde。例如：如果我收到「晴空」響應，我將其更改爲「céulimpo」或任何我想要的。

你們能幫我嗎？

Answer 1

您可以使用翻譯服務將描述翻譯成任何您想要的語言。

例如，這裏有一個JavaScript函數，需要一個字符串，調用谷歌翻譯API，並在葡萄牙返回翻譯字符串：

function translateDescription(description) { 
    var xhttp = new XMLHttpRequest(); 
    xhttp.open("GET", "https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=pt&dt=t&q=" + description, false); 
    xhttp.send(); 
    var response = JSON.parse(xhttp.responseText); 
    return response[0][0][0]; 
} 

我分叉和修改您的CodePen位做到這一點。基本上，在你有var weatherDescription的第46行，我使用OpenWeatherMap API返回的描述字符串調用上面的translateDescription函數。

CodePen：https://codepen.io/anon/pen/GMwWoR