在Openweather API上更改语言

时间:2017-10-16 20:29:26

标签: javascript php api

我会尽快解决这个问题。我想使用此codepen

来使用房地产的天气预报

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

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

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生成不同的结果,比如我看到的Adidas Ultraboost TR网站..

问题:我无法将“描述”更改为葡萄牙语(pt-br)。我已经看过OpenWeather文档了,他告诉我在URL上加上“&amp; lang = pt”,但它没有用。要完成此问题,这是此代码所有者的网站,但我没有访问this page,我认为我可以更改某些设置或类似的内容。如果您运行代码段,我可以在响应中更改:

“天气”:{     “简单”:“清除”,     - &GT; “description”:“晴空”,&lt; -

所以,我认为有两种方法可以帮助我:

  1. 告诉我一种方法可以将“晴朗的天空”更改为“céulimpo”或portguese等同于不需要更改de php文件:

  2. 给我一​​个亮点来改变你的回应用php。示例:如果我收到“晴空”回复,我将其更改为“céulumpo”或我想要的任何内容。

  3. 你能帮帮我吗?

1 个答案:

答案 0 :(得分:0)

您可以使用翻译服务将说明翻译成您想要的任何语言。

例如,这是一个JavaScript函数,它接受一个字符串,调用Google Translate 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来做到这一点。基本上,在第46行,您有var weatherDescription,我使用OpenWeatherMap API返回的描述字符串调用上面的translateDescription函数。

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