2016-01-29 91 views
2

所有在这段代码中,我试图给在本地用户位置和温度,但不知何故温度显示方式摄氏度少,也没有下文更新是我尝试喜欢它是4- 5小时返回数据,为10摄氏度以下一样,如果温度是22(℃)小时背面是露出样3(摄氏)的工作实施例在codepen http://codepen.io/cannelflow/full/RrymYo/天气API(openweathermap)显示温度错误

var x = document.getElementById("demo"); 
 
var y = document.getElementById("demo1"); 
 
window.onload = getLocation(); 
 
//window.onload=getWeather(); 
 
function getLocation() { 
 
    if (navigator.geolocation) { 
 
     navigator.geolocation.getCurrentPosition(showPosition, showError); 
 
    } else { 
 
     x.innerHTML = "Geolocation is not supported by this browser."; 
 
    } 
 
} 
 
//Location For Display 
 
function showPosition(position) { 
 
    var loc = { lat: position.coords.latitude, lon: position.coords.longitude }; 
 
    getWeather(loc); 
 
    var baseURL = "https://maps.googleapis.com/maps/api/geocode/json?latlng="; 
 
    var fullURL = baseURL + loc.lat + "," + loc.lon; 
 
    $.ajax({ 
 
     url: fullURL, 
 
     success: function (display) { 
 
      x.innerHTML = display.results[1].formatted_address; 
 
     } 
 
    }); 
 

 
} 
 
//Location For Weather 
 
function getWeather(loc) { 
 
    var baseURL = "http://api.openweathermap.org/data/2.5/weather?lat="; 
 
    var appid = "064129b86c99c35c42d531db251b99e3"; 
 
    var fullURL = baseURL + loc.lat + "&lon=" + loc.lat + "&appid=" + appid + "&units=metric"; 
 
    //http://api.openweathermap.org/data/2.5/weather?lat=21.2600668&lon=81.5989561&appid=064129b86c99c35c42d531db251b99e3&units=metric 
 
    $.ajax({ 
 
     url: fullURL, 
 
     success: function (display1) { 
 
      y.innerHTML = display1.main.temp; 
 
     } 
 
    }); 
 
} 
 

 

 
function showError(error) { 
 
    switch (error.code) { 
 
     case error.PERMISSION_DENIED: 
 
      x.innerHTML = "User denied the request for Geolocation." 
 
      break; 
 
     case error.POSITION_UNAVAILABLE: 
 
      x.innerHTML = "Location information is unavailable." 
 
      break; 
 
     case error.TIMEOUT: 
 
      x.innerHTML = "The request to get user location timed out." 
 
      break; 
 
     case error.UNKNOWN_ERROR: 
 
      x.innerHTML = "An unknown error occurred." 
 
      break; 
 
    } 
 
}
<body> 
 
    <section> 
 
     <div class="container-fluid text-center"> 
 
      <br /> 
 
      <!-- <h1><button class="btn btn-danger" onclick="getLocation()">Click Me To Get Your Location!</button></h1> --> 
 
      <h1 class="text-primary" id="demo1"></h1> 
 
      <br /> 
 
      <h1 class="text-primary" id="demo"></h1> 
 
     </div> 
 
    </section> 
 
</body>

回答

0

你必须在查询字符串一个错字。更好的选择是用户jQuery.param从对象构建查询字符串,而不是易于阅读,因此不易出错。

function getWeather(loc) { 
    var baseURL = "http://api.openweathermap.org/data/2.5/weather?"; 
    return $.ajax({ 
    url: baseURL + $.param({ 
     appid: "064129b86c99c35c42d531db251b99e3", 
     lon: loc.lon, 
     lat: loc.lat, 
     units: "metric" 
    }), 
    success: function(display1) { 
     y.innerHTML = display1.main.temp; 
    } 
    }); 
} 
+0

其实,比明确构建清洁了一下URL。 – max

1

你有一个错字:

var fullURL = baseURL + loc.lat + "&lon=" + loc.lat + "&appid=" + appid + "&units=metric"; 

应该

var fullURL = baseURL + loc.lat + "&lon=" + loc.lon + "&appid=" + appid + "&units=metric"; 
0

修改它像

function getWeather(loc) { 
 
    var baseURL = "http://api.openweathermap.org/data/2.5/weather?lat="; 
 
    var appid = "064129b86c99c35c42d531db251b99e3"; 
 
    //var fullURL = baseURL + loc.lat + "&lon=" + loc.lat + "&appid=" + appid + "&units=metric"; 
 
    //http://api.openweathermap.org/data/2.5/forecast?lat=35&lon=139&appid=44db6a862fba0b067b1930da0d769e98&units=metric 
 
    $.ajax({ 
 
     url: baseURL, 
 
     type: 'get', 
 
     dataType: 'JSONP', 
 
     data: { lat: loc.lat, lon: loc.lon, units: 'metric', APPID: appid }, 
 
     success: function (data) { 
 
      y.innerHTML = data['main']['temp'] + " °C"; 
 
     } 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

,它在你自己的答案也工作使用`data`像曾为