无法使用JavaScript提取位置

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上，Codepen要求访问并接收它。 但是，我的代码仍然没有更改纬度和经度。

Answer 1

问题是您在获取回调的结果之前先执行代码

navigator.geolocation.getCurrentPosition()

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