Question

我正在尝试创建一个使用JSON API的天气应用，以帮助您了解您所在位置的天气。为此，我需要用户的位置。

    $(document).ready(function(){

    // gets user's location; shows Earth weather if location cannot be accessed
    var longitude = 0;
    var latitude = 0;
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            latitude = Math.floor(position.coords.latitude);
            longitude = Math.floor(position.coords.longitude);
        });
    }

    $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&appid=44db6a862fba0b067b1930da0d769e98", function(json){

        // gets data from json
        if (json.name == "Earth") {
            $("#city").html("Your browser is not giving me access to your location. \n Showing Earth weather instead.");
        } else {
            $("#city").html(json.name);
            $("#country").html(", " + json.sys.country);
        }
        var weather = json.weather[0].main;
        $("#weather").html(weather);
        var tempInKelvin = parseFloat(json.main.temp);
        var tempInCelsius = Math.round((tempInKelvin - 273.15)*10)/10;
        var tempInFahrenheit = tempInCelsius + 32;
        $("#temperature").html(tempInFahrenheit); // shows temperature in Fahrenheit by default

        // switches between Fahrenheit and Celsius when clicked
        var iterator = 1; // because .toggle() was deprecated in jQuery 1.9
        $("#unit").on("click", function(){
            if (iterator % 2 == 1) { 
                $("#unit").html("&#8451"); // change to Celsius
                $("#temperature").html(tempInCelsius);
            } else {
                $("#unit").html("&#8457"); // change back to Fahrenheit
                $("#temperature").html(tempInFahrenheit);
            }
            iterator++;
        });

        // Changes background according to time of day
        var time = new Date();
        time = time.getHours();

        // adds icon, depending on time and weather
        switch (weather.toLowerCase()) {
            case "clouds":
                $("#icon").html('<p style = "color: white;">&#x2601;</p>');
                break;
            case "rain":
                $("#icon").html('<p style = "color: blue;">&#9730;</p>');
                break;
            case "snow":
                $("#icon").html('<p style = "color: blue;">&#10052</p>');
                break;
            case "clear":
                if (time >= 19 || time <= 4) {
                    $("#icon").html("fa-moon-o");
                } else {
                    $("#icon").addClass("fa-sun-o");
                }
                break;
            default:
                $("#icon").html("No icon found :("); 
        }
    });
});

由于某种原因，它只是将我的经度和纬度设置为0而没有得到该位置。我已经在这里工作了好几个小时，但我无法弄清楚。

我知道Chrome无法让页面访问我的位置，但我已将代码放在Codepen上，后者请求访问并接收它。但是，我的代码仍然没有对纬度和经度进行任何更改。

Answer 1

问题是在获得

的回调结果之前执行代码

navigator.geolocation.getCurrentPosition()

您需要执行代码 async ，等待您获得成功回调的结果，这将更新您的坐标值。

无法使用JavaScript获取位置

1 个答案: