无法使用 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 上，它请求访问并接收它。但是，我的代码仍然没有对经纬度进行任何更改。

Answer 1

问题是你在得到回调结果之前执行你的代码

navigator.geolocation.getCurrentPosition()

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