2016-01-29 87 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`像曾爲