3

我正在开发一个个人项目，该项目使用 W3C Geolocation API 来检索用户的位置，然后使用 Wunderground 的 API 通过发出 AJAX 请求来加载该位置的天气预报。过程是这样的：

  1. 用户加载页面。
  2. 当页面被加载时，浏览器会要求用户分享他的位置。
  3. 如果 Geolocation 可用，我们确定坐标并将它们存储在两个变量中。如果没有，我们跳到第 7 步。
  4. 这些变量（坐标）混合在另一个变量（称为 urlpath）中，形成一个完整的 URL。
  5. 我们向 Wunderground 的 JSON API 发出 AJAX 请求，该请求 URL 包含变量“urlpath”。
  6. 我们解析接收到的 JSON，然后将结果显示给用户。然后我们就完成了。
  7. 由于地理位置不可用，或者浏览器不支持，我们将“urlpath”变量的值更改为自己的 Wunderground 的地理位置，然后我们发出 AJAX 请求，解析 JSON 并将数据显示给用户。

问题是 AJAX 请求是在“urlpath”变量配置坐标之前完成的。它下载以下文件：

http://api.wunderground.com/api/a701d0d2314662c6/undefined.json

而不是这个：

http://api.wunderground.com/api/a701d0d2314662c6/geolookup/q/37.776289,-122.395234.json

拜托，你能帮帮我吗？我对此有点新手，但我感谢你的帮助。非常感谢。

这是代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Weather</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;">
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js" type="text/javascript"></script>
    </head>
<body>
    <div id="container">
        <div class="sliceinfo" id="weather">
            <span class="ttitle">The weather</span>
            <div id="weathercnt">
                <p id="wlocation" class="sliceheadr">Loading location...</p>
                <p id="wconsulted">Loading data...</p>
                <img id="imgforecast" src="images/loading.gif" class="sliceimg" alt="Some icon">
                <div id="detailw">
                    <p id="tempw"></p>
                    <p id="windw"></p>
                    <p id="humidw"></p>
                </div>
            </div>
        </div>
    </div> 
<script type="text/javascript">
jQuery(document).ready(function($) {
            var KEY = "a701d0d2314662c6";
            var urlpath, wlat, wlong;
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(getLocation);
            }
            else {
            urlpath = "geolookup/q/autoip.json";
            }
            function getLocation(position) {
                wlat = position.coords.latitude;
                wlong = position.coords.longitude;
                urlpath = "geolookup/q/" + wlat + "," + wlong ;
            }
            if (KEY != "a701d0d2314662c6")
            {
                $.ajax({
                    url: "http://api.wunderground.com/api/" + KEY + "/" + urlpath + ".json",
                    async: false,
                    dataType: "jsonp",
                    timeout: 4000,
                    success: function(parsed_json) {
                        var localw = parsed_json['current_observation']['display_location']['full'].toString();
                        var temp_c = parsed_json['current_observation']['temp_c'].toString();
                        var winds = parsed_json['current_observation']['wind_kph'].toString();
                        var humidw = parsed_json['current_observation']['relative_humidity'].toString();
                        var iconw = parsed_json['current_observation']['icon'].toString();
                        var consultw = parsed_json['current_observation']['observation_time'].toString();

                        $('#wlocation').html(localw);
                        $('#imgforecast').attr('src', "images/icons/" + iconw + ".png");
                        $('#tempw').html("<strong>Temperature:</strong> " + temp_c.replace(".",",") + " <sup>º C</sup>");
                        $('#humidw').html("<strong>Humidity:</strong> " + humidw);
                        $('#windw').html("<strong>Wind:</strong> " + winds + " Km/h");
                        $('#wconsulted').html(consultw.replace("Last Updated on","<strong>Updated on: </strong>"));
                        $('#wlocation').css("font-weight","bold");
            },
            error: function(request, status, err) {
                if (status == "timeout") {
                    $('#wlocation').html("ERROR");
                    $('#consultado').html("We were not able to load the information");
                    $('#imgforecast').attr('src', "http://t3.gstatic.com/images?q=tbn:ANd9GcQzl8g-SPI029d0EUZqW_oFPS8HqQ1yVMTBRZcLzulc51WIEIPn");
                } else {
                     $('#wlocation').html("Error: " + request + status + err);
                }
            }
        });
    }
    else
        alert("Fatal error");
});
</script>
</body>
</html>
4

1 回答 1

2

调用getCurrentPosition是异步的，因此您的 Ajax 调用是在urlpath设置之前进行的。简单的解决方法是在您提供的回调中进行 Ajax 调用getCurrentPosition：

function getLocation(position) {
    wlat = position.coords.latitude;
    wlong = position.coords.longitude;
    urlpath = "geolookup/q/" + wlat + "," + wlong;

    // Load the weather now that we've got the urlpath
    loadWeatherData();
}

function loadWeatherData() {
    // Ajax call goes in here
    // .....
}
于 2013-12-04T00:18:07.633 回答